Custom Triggers for Popup or Flyout Forms in Omnisend

Custom Triggers in Omnisend allow you to show forms in response to specific actions on your website or online store.

This guide explores the steps to implement custom triggers, additional use cases, and the limitations when using this feature.

What's a Custom Trigger?

A custom trigger allows you to display a popup or flyout form only when a predefined action occurs on your website, such as a button click or a custom event.

This feature is great when you want to capture leads or present offers at precise moments in the customer journey rather than relying solely on time-based or behavior-based triggers like page scrolls or exit intent.

Example of Custom Trigger Code

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

The unique form ID, in this example '658c3b55768232c9e85d0453', is automatically generated when the form is created in Omnisend, so there is no need to manually replace it. Each form will have its unique identifier.

Setup Process

Step 1. 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.

Step 2. 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.

Step 3. Copy the Trigger Code. In the Custom Trigger section, copy the code snippet generated by Omnisend.

Step 4. 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.

Example of a Button-triggered Form

<button class="button" onclick="openOmnisendForm()">Subscribe now</button> 

<script> 
  function openOmnisendForm() { 
    window.omnisend = window.omnisend || []; 
    window.omnisend.push(['openForm', '67120b11b81fbf158e687d4f']);
}
</script>

Note: 67120b11b81fbf158e687d4f is an example of a FormID, which will be different for your form.

Here's a short step-by-step instruction for Shopify store owners on how to add the "Subscribe Now" button to their stores.

Please note that if you're unfamiliar with customizing Shopify themes, you may need to seek assistance from a developer to implement these changes effectively.

Step 1. Access Shopify Admin

Log in to your Shopify admin panel.
In the left-hand menu, click Online Store → Themes.

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 codes.

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!