Skip to main content

What is an Embedded Form campaign type?

The Embedded Form campaign type lets you place an Alia form directly within your page, such as in your footer or on a product page, instead of showing it as an overlay popup. This article explains how Embedded Forms work and how to add one to your store.

Written by Rob D

When you create a campaign in Alia, you choose one of three campaign types: Standard, Embedded Form, or Subscription Upsell. The type you choose determines what the popups in that campaign can do.


How Embedded Forms work

Every popup you create in this campaign type is automatically placed within your page, so there's no need to set this up for each one individually. You can still customize each popup as usual, including its design, targeting, and suppression rules. Embedded Forms collect email and SMS signups the same way as standard Alia popups, with the same bot protection. The only difference is where they appear.


Creating your Embedded Form campaign

  1. Create a new campaign and select Embedded Form as the campaign type.

Choosing embedded form from the campaign dropdown

2. From there, create and design your popup as usual.

3. Once your popup is ready, you'll use its embed snippet to tell your website

where the form should appear. You'll find the snippet under the Embed tab in

the popup editor's right panel.

an example of the embed snippet in the ui

Adding your Embedded Form to Shopify

For most Shopify themes, the easiest way to add your Alia form is with a Custom Liquid section.

Note: Not on Shopify? Paste the embed snippet into your site's HTML wherever you want the form to appear, and make sure the Alia base script is installed on your site.

From your Shopify admin:

  1. Go to Online Store → Themes.

  2. Select Customize on the theme you want to edit.

  3. Navigate to the page or template where you want the form to appear.

  4. Add a Custom Liquid section.

  5. Paste the embed snippet provided by Alia into the Custom Liquid field.

  6. Move the section to where you'd like the form to appear.

  7. Save your changes.

Your Alia embed snippet will look similar to this:

<div id="__alia_mount_campaign_12345"></div>

Your campaign ID will be different. Think of this snippet as a placeholder: wherever you place the snippet is where Alia will display the embedded form.


Adding an Embedded Form to your footer

To display your form near the bottom of your storefront:

  1. Open the Footer area of your Shopify theme.

  2. Add a Custom Liquid section.

  3. Paste your Alia embed snippet into that section.

  4. Move the section to where you'd like the form to appear.

Note: Your footer appears on most pages of your store, so a form you add there may show up throughout your storefront.


Adding an Embedded Form to a product or landing page

You can use the same process elsewhere on your storefront.

  1. Navigate to the appropriate product, page, or other template in the Shopify theme editor.

2. Add a Custom Liquid section where you'd like the form to display.

If you only want the embedded form to appear on a specific page, make sure you are editing or creating the appropriate template for that page.


Adjusting the spacing around an Embedded Form

Depending on your Shopify theme and the size of your Alia form, you may find that the form sits too close to another section or overlaps the content above or below it. If this happens, adjust the padding in the Alia popup editor until you are satisfied with the result.

Using a custom selector

If your website already contains an element where you'd like the form to appear, you can also use a custom selector instead of the standard embed container.

For example:

#newsletter-signup

or:

.footer-form

When you use a custom selector, Alia mounts the form inside the matching element on your website.

Note: This option is best suited for users who are comfortable working with HTML and CSS selectors.


Previewing your Embedded Form before publishing

The Preview button in the popup editor shows how your form looks and behaves. However, it opens your form on a blank page, so it can’t show you how the form fits into your storefront. To see your form in place on your own site before it goes live, add a preview key to the page’s URL.

This is especially useful if you’re replacing a form that’s already on your site and want to check the new one before taking the old one down.

Previewing your form on your storefront

  1. Add the embed snippet to the page where you want the form to appear. For steps, see Adding your Embedded Form to Shopify above.

  2. In the popup editor, click Preview.

  3. In the tab that opens, copy the preview parameter from the end of the URL. It will look similar to this:

[?alia_preview=XXXXXXXX]
  1. Open the page where you added the snippet, and paste the preview parameter at the end of the page’s URL. If the URL already contains a ?, replace the ? at the start of the parameter with &.

  2. Load the page. Your form appears where you placed the snippet.

Note: Your form only appears when the page is opened with the preview parameter. Visitors to your store won’t see it until you publish your campaign.]

Previewing a replacement for a live form

If you’d rather not add anything to your live pages yet, you can preview your new form in one of these ways:

  • Use a copy of your theme. In your Shopify admin, go to Online Store → Themes, and duplicate your current theme. Add the embed snippet to the copy, select Preview on that theme, and add the preview parameter to the end of the preview URL. Your live store isn’t affected.

  • Use a test page. Create a new page in Shopify that isn’t linked from your store’s navigation, add the embed snippet to it, and preview the form there.

  • Use a staging site. If your store has a staging or development site, add the embed snippet there and preview the form without affecting your live store.

  • Use a custom selector. If you’re comfortable with HTML and CSS, you can point your new form at an element already on your page, such as the container your current form uses. For details, see Using a custom selector above.

Note: If you use a custom selector that targets your current form’s location, your new form will mount in that spot for all visitors once published. Make sure you remove or unpublish your old form at the same time.


Targeting and suppression rules

Embedded Forms can still use Alia's targeting and suppression options.

For example, you can suppress an embedded form for visitors arriving from a particular traffic source using UTM parameters, just as you can with a standard popup. For more information, see Targeting Popups by Traffic Source (UTM Parameters).


How views are measured for Embedded Forms

Embedded Forms don't record traditional popup views in the same way as overlay popups. Because an embedded form is part of the page itself, its view count will generally track more closely with page views. Keep this difference in mind when comparing an embedded form's performance with a standard overlay popup.


FAQ

I added the embed snippet, but my form isn't showing. What should I check?

The most common cause is a targeting or suppression rule. Embedded Forms follow the same rules as your other Alia popups, so if your campaign is set to show only to new visitors, you won't see it on your own store if you've visited before. To check, open your store in a private or incognito browser window, or temporarily adjust the rule in your campaign settings.

If the form still isn't appearing, check the following:

  • Your campaign is live. Make sure the campaign and popup are published and active.

  • The Alia base script is installed on your site. The embed snippet only marks where the form should appear. Your site also needs the Alia base script installed, or the form won't load.

  • Your snippet is on the right page. Multiple pages can share the same Shopify template, so confirm you added the Custom Liquid section to the template for the page you're viewing, and that you saved your changes.

  • The section isn't hidden. Make sure the section containing your snippet is visible and isn't hidden by your theme's settings or custom CSS.

  • Your custom selector matches an element on the page. If you're using a custom selector instead of the standard snippet, make sure that element exists on the page you're viewing.

Will visitors see both my embedded form and my overlay popup?

They can. Embedded Forms and overlay popups are separate campaigns, and each follows its own targeting and suppression rules. If both campaigns' rules match a visitor, that visitor may see both. In some cases, an embedded form in the footer can sit alongside a welcome popup without feeling repetitive.

If you'd rather visitors see only one at a time, use targeting and suppression rules to control where each appears. For example, you could exclude your overlay popup from pages where your embedded form appears.

Can I have more than one embedded form on the same page?

Yes. You can place multiple embedded forms on the same page, such as one within a product description and another in your footer. To do this, add a separate Custom Liquid section for each form, paste in the embed snippet, and move each section to where you'd like the form to appear.

What happens to the embedded form for visitors who have already subscribed?

After a visitor signs up, your embedded form shows its reward screen, welcoming them and confirming they're subscribed. When they return to your store, they'll continue to see this reward screen instead of the signup form, so existing subscribers aren't asked to sign up again. You can customize the reward screen's message and button in the Alia popup editor to make the returning-visitor experience feel intentional, such as linking to a bestselling collection.

Visitors who return on a different device or browser and have cleared their cookies may see the signup form again.

Can I convert my Embedded Form campaign into a standard popup?

No. A campaign’s type is set when you create it and can’t be changed later. To show the same form as a popup, create a new Popup campaign and rebuild or copy your design into it. You can then show it with the usual popup triggers, or open it with the Alia SDK, for example, from a button click.

Did this answer your question?