# Popups 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. 1. Clicking on the + icon in the visual editor 2. 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 3. In each tab, you can find a different set of popups ![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-M_BftiQTQ7Dk-Y95bS4%2F-M_BgmggSNbjB2b1Gx5l%2Fimage.png?alt=media\&token=f044d582-5cb6-4c14-a6ca-3fddfe8b4efd) 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. ![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-M_BftiQTQ7Dk-Y95bS4%2F-M_Bhe2KXpd7AVXW5d_f%2Fimage.png?alt=media\&token=ef1a7c44-b500-4793-b6d0-84c36031e3e2) 1. **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 2. **Settings:** The settings button provides you with various options to configure a popup 3. **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 4. **Delete:** If you want to delete the popup then click on the delete button ### **Popup Settings** The settings option allows you to configure your popup based on various requirements. #### **Visibility** 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 ![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-M_BftiQTQ7Dk-Y95bS4%2F-M_BhuV6KhdkP-oTBioH%2Fimage.png?alt=media\&token=c9e32397-222e-42b0-a26c-1befd99d317b) {% hint style="info" %} By default, the Visible option will be set to Desktop and Mobile {% endhint %} #### Display 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 {% embed url="" %} * 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 {% embed url="" %} * 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 {% embed url="" %} * 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% {% embed url="" %} {% hint style="info" %} By default, the Display option will be set as On Entry {% endhint %} **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 ![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-M_BftiQTQ7Dk-Y95bS4%2F-M_BiREFoZFQLXCoP195%2Fimage.png?alt=media\&token=2d7615de-78a3-41fb-81d1-b25a3d66b51e) {% hint style="info" %} By default, the Close settings will be set to *Show on next session* option {% endhint %} #### **Form submit settings** 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](https://doc.customfit.ai/integrations/hubspot) with CustomFit and select *Create Hubspot contact* option under the Form settings {% hint style="info" %} If Hubspot has not been integrated and if you have selected *Create HubSpot contact* then the form submission will fail {% endhint %} * 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](https://doc.customfit.ai/integrations/salesforce) with CustomFit and select *Create Salesforce lead* option under the Form settings {% hint style="info" %} If Salesforce has not been integrated and if you have selected *Create Salesforce lead* then the form submission will fail {% endhint %} * 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\\ {% embed url="" %} {% hint style="info" %} By default, the Form submit settings will be set to Invoke API option {% endhint %} #### **Success message** 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 {% embed url="" %} #### **Failure message:** 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 {% embed url="" %} #### **After submit open Url** 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 {% embed url="" %} ### **Example** Below steps will help you in adding a popup and editing the popup based on your requirements #### Edit the text 1. Click on the text that you wish to edit 2. Change the text in the editor palette 3. Once you make the changes click on save to apply the necessary changes ![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-M_K0p2zuMeWzjer8E2K%2F-M_KVhKt2V-ut5DZHylp%2Fimage.png?alt=media\&token=c0d57b8b-2cff-4338-974c-159aeea3475d) #### Changing the image 1. Click on the image 2. Click on the browse icon in the editor palette and change the image based on your requirement 3. Click on save ![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-M_K0p2zuMeWzjer8E2K%2F-M_KWGCJ-ALF2EnEvYIH%2Fimage.png?alt=media\&token=37b377ab-940e-44bf-97b2-19c1f269f8c0) #### Changing the CTA 1. Click on the CTA 2. From the editor palette, you can change the text, dimensions, radius, etc. of the CTA. You can also change *href* of the CTA 3. Click on save ![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-M_KWoCHI2keusltF3q5%2F-M_KZJA6SCm0jwlS54Ud%2Fimage.png?alt=media\&token=c47afd2e-e182-4a89-8905-038363c0675b) #### Change the background color of the popup 1. Click on the image 2. Click on parent then the entire template of the popup gets selected 3. Click on the fill color tool and select the color of your choice 4. Click on save ![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-M_KWoCHI2keusltF3q5%2F-M_KegkHjYvYxACEh1nK%2Fimage.png?alt=media\&token=b64a1b9a-f3eb-428e-bc91-bbdef5d224d2) To preview your changes click on the preview button to check that your edits looks as you intended. ![](https://1136256215-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MUgAFLO61VraHX8jwLt%2F-M_KsuMqckzQ0dNuc_pW%2F-M_KumEnhGWz3gER_k57%2Fimage.png?alt=media\&token=1b0cdf3d-8315-4a12-bc1d-87a480e0fcaa) {% hint style="info" %} Always the Preview Link is copied up to the last finalized changes {% endhint %} {% hint style="info" %} 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. {% endhint %}