Embedding forms
Put your signup form on your own website as a popup, and choose when it appears, so visitors can join without leaving the page.
Embedding puts your signup form in a popup on your own website. You choose when it opens and where it sits, then paste a short snippet into your page. People who join through the popup confirm by email, the same as on the landing page. You’ll need to be able to edit your site’s HTML, and the steps in the drawer cover each site builder it supports.
Embeds are popups. To put a signup right on a page, link to the landing page.
Embed your form
- Open Forms.
- Select the form’s menu, then select Embed.
- Choose the site builder you’re adding the form to, or Somewhere else.
- Under Where it sits, choose a position.
- Under Show it when someone…, choose what opens the popup.
- Select Get instructions, then copy the code and paste it where the steps say.
The code is a script tag, plus a link when the popup opens from one:
<a href="https://xoxo.email/your-slug" target="_blank" rel="noopener">Subscribe</a>
<script async src="https://xoxo.email/embed.js" data-form="your-slug"></script>data-form is your form’s slug, the last part of its address at https://xoxo.email/your-slug. With nothing else set, any link on the page to that address opens the popup, so restyle the included link, or point a button you already have at the address and drop the link. The script can live anywhere on the page, and including it more than once is safe. If you change the landing page address, update data-form in your code too.
Popup trigger
Show it when someone… sets data-trigger-type. Timed, scroll, and exit popups open once per page view, and links to the form still go to its page. After a visitor closes the popup, it won’t open by itself again for 30 days, and never again once they subscribe. To open the popup from a button as well, see pair a button with an automatic popup.
Clicks a specific link is the default, so the code can leave out data-trigger-type or set it to click. Every link to the form’s address opens the popup. To open it from something that isn’t a link as well, set data-trigger-selector to a CSS selector for it.
<a href="https://xoxo.email/your-slug" target="_blank" rel="noopener">Subscribe</a>
<script
async
src="https://xoxo.email/embed.js"
data-form="your-slug"
data-trigger-selector=".subscribe-button"
></script>Is on the page for a few seconds opens the popup after data-trigger-seconds seconds. Edit the number to change the delay.
<script
async
src="https://xoxo.email/embed.js"
data-form="your-slug"
data-trigger-type="delay"
data-trigger-seconds="5"
></script>Scrolls down the page a bit opens the popup once the visitor has scrolled data-trigger-percent percent of the page. Edit the number to change the depth.
<script
async
src="https://xoxo.email/embed.js"
data-form="your-slug"
data-trigger-type="scroll"
data-trigger-percent="50"
></script>Is about to exit the site opens the popup when the pointer leaves the top of the window.
<script
async
src="https://xoxo.email/embed.js"
data-form="your-slug"
data-trigger-type="exit"
></script>Popup position
Where it sits sets data-location. Center is the default and writes nothing into the code. The other positions are top-left, top-center, top-right, center-left, center-right, bottom-left, bottom-center, and bottom-right.
<script
async
src="https://xoxo.email/embed.js"
data-form="your-slug"
data-trigger-type="exit"
data-location="bottom-right"
></script>On a small screen the popup is centered, whatever the position.
Older browsers
The popup needs a browser from 2022 on. In older browsers the link opens the form’s own page in a new tab, and the timed, scroll, and exit triggers stay off so visitors never see a blocked popup. The link also works when the script can’t load.
For popups, events, and styling from your own code, see the embed script.