This guide explains how to deploy Formulayt gates on your website. Each gate provides two different deployment methods to suit your implementation needs, modal and inline.
To get started locate and edit your gate then goto the embed code tab. This are will automatically generate embed codes specific to your gate.
Modal deployment
A modal gate appears as an overlay on the page when triggered by a link. Modal gates provide a clean user experience without requiring page navigation.
To implement a modal gate:
Use the provided bookmark (hashtag) as the HREF attribute in your link
The link can contain text, an image or a button
When clicked, the gate appears as a overlay over your content
Note: your link HREF should contain only the bookmark and nothing else.
Example modal gate embed
Embed bookmark format:
#gate-98ea71d5-b820-49dc-acdb-167575509999
Example implementation:
<a href="#gate-98ea71d5-b820-49dc-acdb-167575509999">Download our latest guide</a>
Inline deployment
An inline gate renders directly within your page content. Inline gates integrate seamlessly with your existing page layout.
Key features include:
The gate appears wherever you place the embed snippet
Forms automatically respond to fit their containing element
A loader animation plays while the form is loading
Inline gates can be deployed using two embed types: HTML snippet or image method.
Embed using HTML snippet
The HTML snippet is a DIV element. Wherever the HTML snippet is placed in your page is where the form will render.
Example HTML snippet :
<div class="gate-98ea71d5-b820-49dc-acdb-167575509999"></div>
Embed using image method
The image method allows you to embed a form as an image in your CMS. Place an image in your page and use the provided URL as the SRC of that image. Wherever the image is placed in your page is where the form will render. While the form is rendering a loader animation will play.
Example image URL:
https://app.gatedcontent.com/loading/94497224.gif#gate-2564ff98-4ff7-4af7-a4cc-c591cb0fd6e5
Gate deployment implementation tips
Modal gates work best for:
Download links
Call-to-action buttons
Situations where you want to preserve the current page context
Inline gates work best for:
Dedicated landing pages
Content sections where the form is the primary focus
Situations where you want the form to be immediately visible
Always ensure the Formulayt script is installed on any page where you deploy gates.