Article navigation
Overview
You can easily embed an Audience Republic signup form on any page of your website to collect subscribers. Simply copy and paste the provided code snippet into the HTML body of your site. Since each website platform is slightly different, we recommend checking your website’s help center for specific instructions on how to embed code into the body section.
Here are the steps to access or generate the embed code from your Audience Republic account:
Navigate to Messaging.
Click on the Signup Forms tab.
Find the signup form you want to embed, and click the ⋮ icon
Select Create Widget
Choose your preferred widget type from Banner, Button, Link or Embedded Form
Depending on the widget option you choose, the preview will update in real time, and the corresponding embed code will adjust automatically.
Embedded form
The embedded form is the most customizable option—it automatically pulls styling from your website to match the look and feel of your brand. Your team can further customize the widget code if additional edits are needed.
To generate the embed code:
Click on the Embedded Form tab
Enter the URL or domain where the form will be embedded
Click Validate
Once validated, a code snippet will appear, which you can then copy and paste into the HTML body of your website.
Banner, Button, Link form options
While the Banner, Button, and Link options each offer a different visual experience, the process for adding them to your website is the same: simply copy the generated code and paste it into the HTML body of your site.
To use one of these options:
Navigate to the relevant tab (Banner, Button, or Link)
Customize the appearance (e.g., text, colour) if needed
Copy and paste the code snippet into your website's HTML body
Alternatively, if you're using the Button or Link option and prefer a simpler approach, you can just copy the form URL and add it to an existing button or hyperlink on your site—no coding required. This is a great option for non-technical users.
Important information on embedding signup forms
If you embed a signup form within a widget, the Spotify button will not function.
You can add multiple different signup forms to your website, but the same signup form cannot be placed more than once on the same webpage.
Signup forms will inherit your website’s existing styles where possible. In some cases, you may need assistance from your developer to adjust the presentation and layout. If the form still doesn’t display correctly after adjustments, it likely means that the webpage does not have the necessary styles set up for it.
If you embed the form directly on your website, the email verification feature will not be available.
API Key for signup forms
We also have an API available which you can use to connect your own bespoke signup form and then sync contacts to a nominated list.
Why isn’t my Signup Form Widget displaying?
If your sign up form widget isn’t showing on your site, the most common cause is that your site’s lazy-loading plugin (for example, WP Rocket or similar tools) is altering the embed code.
Here’s what happens:
The plugin replaces the iframe
srcwithabout:blankand moves the real URL into adata-lazy-srcattribute.Since the iframe is hidden with
display:none;, the lazy-loader never triggers it.As a result, your Audience Republic form doesn’t load.
How to Fix It
To ensure the iframe always loads correctly, you’ll need to tell your lazy-loading plugin to skip this specific iframe.
Add the following three attributes to your <iframe> tag:
class="skip-lazy" data-no-lazy="1" loading="eager"
Example Widget Code
Here’s what your widget embed code should look like once updated:
<div id="arep-iframe-container-12345">
<iframe
class="skip-lazy"
data-no-lazy="1"
loading="eager"
id="arep-iframe-12345"
src="https://arep.co/m/my-signup-form?domain=mysite.com&hash=hvqmswelfngqzycmjn"
style="width: 1px; height: 1px; display: none;">
</iframe>
</div>
<div id="arep-form-container-12345">
<h1 id="arep-form-12345-header"></h1>
</div>
<script>
var arepFormId = 12345;
var targetOrigin = "https://arep.co"
</script>
<script src="https://app.audiencerepublic.com/scripts/embeddable-signup-form.js"></script>
<style>
/* ------------------------------------------------------------
Developers: DO NOT MODIFY ANYTHING ABOVE THIS LINE.
Anything below this line can be freely deleted, modified or overwritten. */
.arep-form {
width: 100%;
max-width: 600px;
}
.arep-input {
display: block;
width: 100%;
}
.arep-form-field-wrapper {
margin-bottom: 12px;
}
.arep-mobileNumber-input-wrap .arep-mobileNumber-code-input {
display: inline-block;
width: 100px;
margin-right: 6px;
}
.arep-mobileNumber-input-wrap .arep-mobileNumber-number-input {
display: inline-block;
width: calc(100% - 100px - 6px);
}
</style>
Summary
If your form isn’t showing, it’s likely being blocked by a lazy-loading plugin. By adding the skip-lazy, data-no-lazy="1", and loading="eager" attributes to your <iframe>, you can ensure the form loads immediately and displays correctly on your site.
Still need help?
Contact us at support@audiencerepublic.com