Popups
Last updated
Last updated
CustomFit allows you to add banners & popups on your website with zero code. You can have popup content personalized based on the audience it is targeted at. You can add a new popup on the webpage if you are in the CustomFit visual editor.
Clicking on the + icon in the visual editor
Select the pop-ups tab if you want to add a popup. Or select the inline tab if you want to add an inline element/banner
In each tab, you can find a different set of popups
For example: If you wish to add an email popup then select the popup which contains an email field.
Once you have added a popup then you can see 4 buttons on top of the popup.
Convert to Template: If you have made some changes to the template and want to reuse the template then you can save it and reuse it. To save the template click on the Convert to Template button
Settings: The settings button provides you with various options to configure a popup
Hide: Once you are done personalizing your popup and want to continue with webpage personalization then click on the hide button to hide the popup
Delete: If you want to delete the popup then click on the delete button
The settings option allows you to configure your popup based on various requirements.
This option lets you configure on which device the popup should be visible
Desktop and Mobile: If you want the popup to be visible on both desktop and mobile then select the Desktop and Mobile option
Desktop only: If you want the popup to be visible only on the desktop then select the Desktop only option
Mobile only: If you want the popup to be visible only on the mobile then select the Mobile only option
By default, the Visible option will be set to Desktop and Mobile
This option lets you configure when the popup should be displayed
On Entry: If you want the popup to be displayed as soon as the visitor lands on the webpage then select the On Entry option
After X Seconds: If you want the popup to be displayed after X seconds of the page load then select the After X Seconds option. By default, the value will be set to 20 seconds
Exit Intent: If you want the popup to be displayed as soon as the visitor tries to close the webpage then select the Exit Intent option. There is an additional option that you can configure specifying the popup should be displayed after X seconds of page load and then trying the close the webpage. If the visitor tries to close the popup within X seconds then the popup will not be displayed. By default, the value will be set to 2 seconds
Scroll %: If you want the popup to be displayed after the visitor has scrolled X percentage on the webpage then select the Scroll % option. By default, the value will be set to 20%
By default, the Display option will be set as On Entry
Close settings
This option allows you to configure the behavior of a popup once it is closed
Show on page refresh: As soon as the visitor clicks on the close(X) icon then the popup will be dismissed for the visitor. If you have selected the Show on page refresh option then the popup will be again visible if the visitor refreshes the page
Show on next session: As soon as the visitor clicks on the close(X) icon then the popup will be dismissed for the visitor. If you have selected the Show on next session option then the popup will be again visible for the visitor in the next session
Show after X duration: As soon as the visitor clicks on the close(X) icon then the popup will be dismissed for the visitor. If you have selected the Show after X duration option then the popup will be again visible for the visitor after X seconds. If the visitor refreshes the page or opens a new session within X seconds then the popup will not be visible. By default, the value will be set to 86400 seconds i.e., 1 day
By default, the Close settings will be set to Show on next session option
This option allows you to configure what should be the next steps after the form has been submitted.
Invoke API: If you wish to invoke your custom API as soon as the visitor submits the form, select the Invoke API option. As the visitor fills the email id and clicks on the button then CustomFit will invoke the configured API
Create HubSpot contact: If you are using Hubspot as your CRM then CustomFit allows you to create Hubspot contact as soon as the visitor submits the form. For that first, you need to integrate Hubspot with CustomFit and select Create Hubspot contact option under the Form settings
If Hubspot has not been integrated and if you have selected Create HubSpot contact then the form submission will fail
Create Salesforce lead: If you are using Salesforce as your CRM then CustomFit allows you to create a Salesforce lead as soon as the visitor submits the form. For that first, you need to integrate Salesforce with CustomFit and select Create Salesforce lead option under the Form settings
If Salesforce has not been integrated and if you have selected Create Salesforce lead then the form submission will fail
Add to CustomFit email list: If you do not have Hubspot/Salesforce as your CRM and also do not have any internal API to be invoked then you can select Add to CustomFit email list option. This option allows you to store the list of email ids locally on the CustomFit side. CustomFit allows you to select the email list in which you wish to save the email id\
By default, the Form submit settings will be set to Invoke API option
If the form submission is successful then CustomFit allows you to have your success message. By default, the success message is We got the info. The success message will be displayed over the form button
If the form submission fails then CustomFit allows you to have your failure message. By default, the failure message is Oops! something went wrong, please try again. The failure message will be displayed over the form button
After the visitor has successfully submitted the form, you have an option of whether the visitor needs to be redirected to a new page or just close the popup. If the After submit open URL field is empty then the popup just closes. If the After submit open URL field has any value then the visitor will be redirected
Below steps will help you in adding a popup and editing the popup based on your requirements
Click on the text that you wish to edit
Change the text in the editor palette
Once you make the changes click on save to apply the necessary changes
Click on the image
Click on the browse icon in the editor palette and change the image based on your requirement
Click on save
Click on the CTA
From the editor palette, you can change the text, dimensions, radius, etc. of the CTA. You can also change href of the CTA
Click on save
Click on the image
Click on parent then the entire template of the popup gets selected
Click on the fill color tool and select the color of your choice
Click on save
To preview your changes click on the preview button to check that your edits looks as you intended.
Always the Preview Link is copied up to the last finalized changes
All the CustomFit popups are responsive by default. We suggest you check how the popup looks like in both mobile and desktop mode before making it live.
