Embed using HTML ID (Shopify & WordPress/Other Sites)

Note: Only one html element id can exist per page.

Once you have set your unique ID you will then copy the script provided in the Form Setup dialog in your Patch account. 

Inserting Embed Script into your Website

Shopify Accounts: You have three options where this code will propagate onto your site without additional development. You will have to use the Custom Liquid block, Custom Liquid section, or the HTML code editor that is available on ‘Pages’ only. Where on your site these elements are available is dependent upon your theme or custom development.

Log in to your Shopify store. Using the left-side menu navigate to 'Online Store'. 

A submenu will appear, depending on which page you want to embed the form on you will either go to 'Themes' or 'Pages'.

Theme Editor:

If you want to embed the form on a page under your 'Theme' you will then click on 'Customize' in the main view of the screen. 

Navigate to the page you want to embed the form on. By default, the theme editor opens to the 'Home page'. Note: Not all pages listed within the theme editor have Custom Liquid Sections or Blocks that are compatible with the div script. Also, not all elements of the theme builders will have the options for either of these elements and this is controlled by your Shopify Theme and will vary per account.

Use the left-side menu to select where on the page you want to embed the form. For this example we will use the Home page. Find a section that allows for a Custom Liquid block or scroll down to where you can add a new section and use the 'Add Section' button.

Then for the section type search or scroll down and click 'Custom Liquid'. 

Note: If this page does not have either of these options then the form cannot be embedded using the Automatic Installation option. If you have a website development team or IT dept you can reach out to them to manually install a form on your site. 

Usually the 'Add section' option is towards the bottom of the page, to adjust where the form is placed you can drag the element up or down.

The section editor will open and you will paste the div script you copied from your Patch account here. Then click 'Save'. 

Please note the preview screen within the editor is not completely accurate in how the form will look on your site. Load the page in your browser to view. Please note additional styling will require knowledge of HTML and CSS that can be applied wither within the Custom Liquid section or within your Form Editor in Patch. 

View in browser:

Pages Editor:

If you want to embed the form on a page listed under your 'Pages' you will click this menu option and choose from the available pages or create a new one. 

Once you have the page opened you will use the HTML Code editor to paste your script into. 

Save your changes and view the page. Note: If the form does not show immediately try clearing your cache. If this does not get the form to appear you may need to wait up to an hour for the pixel to propagate these changes on your site.

WordPress/Other Accounts: You will need to use the Custom HTML code block provided within your theme editor for Forms to propagate onto your site without additional development. Where on your site these elements are available is dependent upon your theme or custom development.

Log in to your WordPress site. Using the left-side menu navigate to 'Pages'. 

Then find and click edit on the page you want to embed the form on. 

Within the page editor/builder add a 'Custom HTML' block onto the page where you want the form to display. Please note how you add the HTML block onto your site depends on your Theme. 

Paste the code snippet you copied earlier from your Patch account and paste it into the code block. Preview and save your changes by clicking 'Publish' or 'Update'.

Test the form on your site.

If this does not work some sites may require you to put the Form into an iframe. Here is the iframe snippet you would use. You will need to insert the form link into this script. You will need to style it accordingly for your needs.

<iframe src="form-link" width="600px" height="500px" frameborder="0"></iframe>

One-click Popup (Shopify & WordPress Sites)

Click the purple plus button in the data table within the Automatic Installation section.

The ‘Form Setup’ dialog will open. By default, the form you are building/editing is selected.

Click the dropdown for Form Type and select ‘Popup’.

Specify Pages for Form Popup Display

By entering URL(s), you can restrict the display to specific pages.

If no URLs are provided, the Form Popup will automatically appear on all pages.

To have your popup show on your entire site leave this section as is:

To limit your popup to specific pages, click the ‘Add Page’ button and then enter the URL of the page in the input field.

Copy the url from your website browser, it should look like this (without the “”): “https://patchretention.com/automated-customer-journeys/”

To include additional pages, repeat the steps.

An additional setting to choose how this popup will trigger on your site will appear.

Choose from the available options of ‘Immediately On Page Load’, ‘After a delay’, or ‘On exit intent’. If you select ‘After a delay’ you will then need to determine the # of seconds until the popup appears. Most delay popups show around the 3-second mark.

There is an additional setting for determining whether this popup will appear over other popups on your site.

Once you are done make sure to save your changes. Your form popup will appear on your site automatically. Please note due to caching, changes to product configuration may take up to an hour to propagate to the web page that has the Pixel installed.