Set Up Custom Triggers for Popup & Flyout Forms

Custom Triggers in Omnisend let you display popup or flyout forms only when a specific action occurs on your website, like a button click or custom event.

Instead of relying on time delays or scroll depth, you control the exact moment your form appears, capturing leads at the most relevant point in the customer journey.

Before You Begin

Custom triggers override all display and targeting settings. The form will only appear when your custom code triggers it, regardless of time delay, scroll %, exit intent, URL targeting, or audience filters.
- To add conditional targeting (e.g., show only on specific pages or to logged-in users), you'll need custom JavaScript on your end.
Supported forms: Popup forms and Flyout forms without a Teaser.
Unsupported forms: Landing page forms and Embedded forms.

What’s a Custom Trigger?

A Custom Trigger displays a form when a predefined action occurs on your site, such as:

Button clicks (e.g., “Join our mailing list,” “Get discount”)
Custom JavaScript events (e.g., quiz completion, game interaction)
Cart close actions (e.g., show a form when a customer closes the cart)

Custom triggers let you show forms at exactly the right moment, when your visitor is most engaged. Whether it’s after a quiz, a game, or a button click, you can create highly interactive experiences that feel personal and timely.

Example of Custom Trigger Code

window.omnisend = window.omnisend || []; 
window.omnisend.push(['openForm', '658c3b55768232c9e85d0453']);

The unique form ID (658c3b55768232c9e85d0453 in this example) is automatically generated when the form is created in Omnisend. There is no need to manually replace it, as each form will have its own unique identifier.

Setup Process

Step 1. Verify Omnisend JavaScript Snippet Is Installed

Before custom triggers work, the main Omnisend JavaScript snippet must be installed on your website. The custom trigger code depends on this snippet to load and display forms.

BigCommerce & WooCommerce - The Omnisend snippet is automatically added when you connect your store. No manual setup needed.
Shopify: Go to Shopify Admin → Online Store → Themes → Click Edit Theme on your active theme → In the left sidebar, click App Embeds → Find Omnisend and toggle it ON (blue) → Click Save.
Custom Ecommerce Platforms: Add the Omnisend JavaScript snippet manually to your site's <head> section or before the closing </body> tag. Get the snippet from Store Settings → Integrations in your Omnisend account.

Step 2. Create Your Form

Start by designing your popup or flyout form in Omnisend. Once created, navigate to the Behavior Settings section of the form editor.

💬 Learn how to create a popup form.

Step 3. Set Display to 'Custom Trigger'

In Behavior Settings → Display, select the option Custom Trigger. This means the form will only appear when the custom trigger is activated on your website.

Note: Once you select Custom Trigger, all other display options (time delay, scroll depth, exit intent, URL targeting, audience filters) are disabled.

Step 4. Copy the Trigger Code

In the Custom Trigger section, copy the code snippet generated by Omnisend.

Example code:

window.omnisend = window.omnisend || [];  window.omnisend.push(['openForm', '658c3b55768232c9e85d0453']);

Note: The Form ID (658c3b55768232c9e85d0453) is unique to your form and automatically generated.

Step 5. Insert Trigger Code on Your Website

Place the code on your website within the element or event where you want the form to appear. This could be a button click, page load, or any other custom action.

Where to Place the Code?

Button or link code: Add wherever you want the clickable trigger to appear (header, product page, blog post, footer).
JavaScript function (openOmnisendForm()): Add once per page in one of these locations.
- Theme footer file;
- HTML widget or custom HTML block;
- Inline after the button (within <script> tags).

Use Cases for Custom Triggers in Omnisend

Button-Triggered Forms

Trigger a form when a user clicks a button. Useful for:

Signup process – "Join our mailing list" button displays a signup form.
Discount offers – "Get Discount" button shows a promotion form with a discount code.
Content unlocks – Offer eBooks, webinars, or exclusive articles behind a form.

Back-in-Stock Notifications

Trigger a form when customers click on an out-of-stock product. This lets them sign up for restock alerts, capturing leads, and building anticipation.

Note: You need to create the button code yourself – Omnisend provides the trigger code, not the button HTML.

Interactive Quizzes or Games

Show a form after a user completes a quiz or interacts with a game. For example:

Collect email addresses for contest entry after a quiz question.
Offer special discounts after game participation.

Example: Add "Subscribe Now" Button in Shopify

Follow these steps to add a Subscribe Now button to your Shopify store that opens an Omnisend form.

⚠️ If you're not familiar with customizing Shopify themes, work with a developer to implement these changes safely.

Step 1. Access Shopify Admin.

Step 2. Edit Your Theme.

In the Themes section, find your active theme, then click Actions → Edit Code.

Step 3. Find the Desired Page or Section

Decide where you want to place the button. This could be on your homepage, a specific product page, or the footer.
Look for the corresponding Liquid file. Common options include:
- index.liquid for the homepage.
- product.liquid for product pages.
- footer.liquid for adding it to the site footer.

Step 4. Insert the Button Code

Within the Liquid file you’ve chosen, find the exact place where you want to add the button. For example, in the index.liquid or product.liquid file.
Copy and paste the code provided by Omnisend in your popup/flyout form.
This will create a 'Subscribe Now' button that opens the Omnisend form when clicked.

Note: You need to create the button code yourself – Omnisend provides the trigger code, not the button HTML.

Step 5. Save Your Changes and Test the Button

Once the code is inserted, click Save at the top right corner of the editor.
Visit your Shopify store and go to the page where you added the button.
Click the 'Subscribe Now' button to ensure it opens the Omnisend form.

Testing and Troubleshooting

Test the Form Trigger. After embedding the code, visit your store and perform the trigger action (e.g., click the button) to ensure the form displays correctly.
Check Console Logs – If the form doesn't appear, open your browser's console (right click → Inspect) and check for errors.
- If you see omnisend is not defined, verify the Omnisend JavaScript snippet is installed (Step 1).
- If you see openForm is not a function, check that the Form ID is correct and the form is published.

FAQ

Why isn't my custom trigger form appearing after I added the code?

First, verify that:

Your form is Enabled in Omnisend (Forms → Select form → Toggle Enable).
The Omnisend JavaScript snippet is installed on your site (for Shopify, enable the Omnisend app embed under Themes → App Embeds).
You pasted the code in a <script> tag or onclick handler, not in a button's URL field.
Test in an incognito window to rule out browser cache or cookie consent blockers.

The form worked before, but now it stopped appearing. What happened?

If your custom trigger was working and suddenly stopped, check:

Cookie consent blockers: If you recently added a cookie consent banner, it may block the Omnisend script until visitors accept cookies. Test in incognito mode after accepting all cookies.
Form status: Verify the form is still Enabled in Omnisend (Forms → Your form → Check toggle at top)
Theme updates: If you updated your Shopify theme, the code may have been removed. Re-add it to your theme files.
Browser console errors: Right click → Inspect and check the Console tab for JavaScript errors that might be blocking the form.

Should you encounter any challenges with this or any other Omnisend features, don't hesitate to reach out to us at [email protected] or via in-app chat. We are here 24/7 for you!