Customizing your campaign pages via CSS/Script Code Injection
Hosted Campaign Pages
Prefinery places web assets used in your campaign on a hosted page in various circumstances, as follows:
Hosted Signup Form
If you're using Prefinery's instant signup link feature but there's a problem with instantly adding the user (e.g. incorrect email address format in the URL parameter, missing values in other fields, etc.), the user is taken to a hosted signup form page.
Hosted Referral Page
If you've set your Signup Form > Settings to Redirect to hosted viral referral page when the form is submitted:
Then the user is brought to the hosted referral page.
Email Opt-in Confirmation Page
If you've enabled double opt-in for your campaign and have an active opt-in confirmation email message, when a new user signs up they'll receive the opt-in email:
When they click on the confirmation link, they're brought to the email opt-in confirmation page.
Email Unsubscribe Confirmation Page
Similar to the opt-in confirmation page, if the user clicks on the unsubscribe link in any of the campaign emails:
Then they're brought to the email unsubscribe confirmation page.
Inserting Code Into Campaign Pages
Anything placed in the Integrations > Code Injection page will be included on all of the aforementioned hosted pages.
You can add HTML elements such as CSS ( <style> ... </style>) or JavaScript (<script> ... </script>) into the head (before the closing </head> tag) and/or footer (before the closing </body> tag) sections of your campaign pages.
Customizing Campaign Pages Using CSS
If you're looking to style your embedded signup form using custom CSS, you can directly add your CSS code in the signup form's CSS section following our guide here: How to Style the Signup Form with Custom CSS (similar steps can be done for the embedded Referral Page as well).
The <body> element of the campaign pages uses the class pfy-hosted-page. This means that if you want to style the campaign pages, you'd need to include the class in the CSS selector.
For example, if you want to give the campaign pages a black ( #000000) background color, your custom CSS would be as follows:
<style type="text/css">
body.pfy-hosted-page {
background-color: #000000;
}
</style>
You can use the same approach to style the inner elements like the container and the text within.
<style type="text/css">
body.pfy-hosted-page {
background-color: #000000;
}
body.pfy-hosted-page .container {
background-color: #333333;
color: #ffffff;
}
body.pfy-hosted-page h3 {
font-size: 2em;
text-transform: uppercase;
letter-spacing: .1em;
font-weight: 600;
color: #dddddd;
}
</style>
Best practice is to place custom CSS within the <head> tag. Don't forget to Save your changes.
Customizing Campaign Functionality Using Scripts
If you're looking to augment or modify functionality of your signup form using custom scripts, you can directly add your scripts in the signup form's JS section following our guide here: How to run scripts when the Signup Form is submitted?
Like how you'd use custom CSS, you can use element selectors to specify which parts of the page you want to trigger the script for, or what the script modifies.
Here's an example jQuery snippet that redirects the referral page to another page as soon as the user clicks on any of the share buttons:
<script>
$( "#pfy-share-form-container .pfy-share-networks a" ).click(function() {
window.top.location.href = 'https://example.com/';
});
</script>
Best practice is to place scripts in the Footer Code box, not in Head Code, to prevent any potential of your custom script blocking the form or referral page from being rendered properly on the page.
