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.
Only popup and flyout forms work with custom triggers. Teaser and embedded forms are not supported.

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. The form will only appear when your custom code triggers it.

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 a unique identifier automatically generated when you create the form. It's embedded in the custom trigger code snippet.

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)

Adding "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, we recommend working 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 we provided in the example above into the file.
This will create a 'Subscribe Now' button that opens the Omnisend form when clicked.

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.

Limitations

1. When using a custom trigger in Omnisend, the form will only appear when the custom event is triggered, overriding any other display or targeting rules. This has several important implications.

No Additional Targeting Options. Once you activate a custom trigger, you can’t layer other rules like 'Appears on URLs' or 'Target by specific segment.' The form will always display when the custom event is triggered, regardless of who the visitor is or what page they’re on.
This also means global applicability as the trigger-based form will appear for everyone who interacts with the trigger unless you add custom JavaScript to handle user conditions (like checking if a user is logged in, has made a purchase, etc.). This would require a developer's setup on your end.

2. Types of Forms Supported. Omnisend allows you to create various types of forms. However, it’s important to note that not all form types are supported with custom triggers.

Supported Forms:
- Popup Forms: These forms appear in a modal overlay on the website and are commonly used to capture email signups or offer discounts.
- Flyout Forms: Similar to popups, flyout forms slide in from the side of the screen, typically used for less intrusive engagement.
Unsupported Forms:
- Teaser Forms: Currently, teaser forms (which show a brief prompt and require users to click to see the full form) do not support custom triggers. These forms typically rely on other display rules and may not behave as intended when combined with custom trigger actions.
- Embedded Forms: These forms can be embedded directly within a webpage and can be triggered by clicking a button or link.

3. Implications for Marketing Strategy

Simple Marketing Structures. Due to the limitations in targeting options, custom triggers are best suited for a straightforward email collection process where the goal is to reach a wide audience with minimal customization.
For example, if you’re running a flash sale, a custom-triggered popup form can effectively capture interest without the need for complex targeting rules.

Use Cases for Custom Triggers in Omnisend

Button-Triggered Forms

One of the most common use cases is triggering a form upon a button click. This is particularly useful for:

Signup process. When the user clicks the 'Join our mailing list' button, a signup form is displayed.
Discount offers. When users click a 'Get Discount' button, show a promotion form with a discount code.
Content unlocks. Offer premium content like eBooks, webinars, or exclusive articles behind a form that unlocks when clicked.

Back-in-Stock Notifications

Custom triggers can also be used to launch back-in-stock forms. When customers click on an out-of-stock product, you can trigger a form that allows them to sign up for stock notifications. This approach can help:

Capture leads while inventory is being restocked.
Build customer interest and anticipation for product restocking.

Please note that you need to create the button on your end, as Omnisend will not provide the code.

Interactive Quizzes or Games

If you're running interactive campaigns (like quizzes), you can use a custom trigger to show a form after a user completes a specific action. For example:

After users finish answering a quiz question, trigger a form to collect email addresses for contest entry.
Launch a form after a user interacts with a game or contest feature on your site. Based on their participation, offer them special offers.

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, use your browser’s console to check for any errors related to the form or custom trigger script.

Custom triggers are a great tool for engaging customers right when it matters. They're perfect for upping newsletter sign-ups, snagging leads on product pages, or dropping discounts just when needed to boost your marketing game.

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!