Embed Widgets on a Page

With the script installed, you add a widget by dropping a container element where you want it to appear.

Basic placement

<div data-al-widget></div>

The widget renders inline, right where you place the div — no iframe, and no external stylesheet to conflict with your site.

By default the widget picks the right one for each visitor: someone who arrived through a referral link sees the claim widget (to claim their discount), and everyone else sees the share widget (to become an advocate). To always show one, give data-al-widget a value:

Value	Shows
(no value) or `auto`	The right widget for the visitor (default)
`share`	Always the share widget
`claim`	Always the claim widget

<!-- A "Refer a friend" page: always invite visitors to become advocates -->
<div data-al-widget="share"></div>

Choose how it displays

Set data-al-position to change where and how the widget appears:

Value	Display
`inline`	In the page, exactly where you place the container (default)
`modal`	Opens in a dialog over the page
`bottom_right` / `bottom_left`	A card that stays in that corner of the screen as visitors scroll. Visitors can dismiss it.
`bottom_bar`	A slim bar along the bottom of the screen. Visitors can dismiss it.

<!-- Keep the referral program in view on every page -->
<div data-al-widget data-al-position="bottom_right"></div>

Write values with underscores (bottom_right, not bottom-right). The corner and bar positions work well in a site-wide footer, so the widget is available on every page without adding it to your content.

Set where referral links land

When someone signs up as an advocate through the widget, the share link they receive points to your homepage by default. To send that referral traffic somewhere specific instead, set data-al-path to the destination path.

<!-- Advocates who sign up at this widget get share links that land on /services -->
<div data-al-widget data-al-path="/services"></div>

This is useful when you want advocate referrals directed to a particular landing page — a campaign page, a flagship product, or a seasonal offer — rather than the homepage. Omit the attribute and share links fall back to your homepage.

Combining attributes

The attributes work together on one container:

<!-- A corner card that always invites sign-ups, with share links that land on booking -->
<div data-al-widget="share" data-al-position="bottom_right" data-al-path="/book"></div>

Multiple widgets on one page

Place as many containers as you like; each renders independently.

<div data-al-widget></div>
...
<div data-al-widget></div>

Customizing appearance with CSS

The widget inherits your site’s fonts and respects your page styles. For finer control, target its classes:

.al-widget {
  max-width: 500px;
  margin: 2rem auto;
}

.al-widget input {
  border-radius: 8px;
}

.al-widget .al-btn-primary {
  background-color: #0f766e;
  border-radius: 8px;
}

For headline, button text, colors, and messages, use the dashboard instead — see Widget Settings.

On WordPress?

Use the shortcode rather than a div. The same options are available as shortcode attributes, type and position:

[advocate_loop_widget]
[advocate_loop_widget type="share" position="bottom_right"]

See Shortcodes.

Troubleshooting

Widget not appearing

Confirm the al.js script tag is on the page and the Brand ID is correct
Make sure the page is on a domain you’ve verified under Admin → Domains. The widget only runs on verified domains — see Domains & Verification
Check that data-al-widget is spelled correctly
Open the browser console and look for [AdvocateLoop] messages
If using GTM, make sure the script fires before DOMContentLoaded

Widget shows inline instead of in a corner

Check the data-al-position value is one of the values above, written with underscores. An unrecognized value falls back to inline.

Previewing each mode

Visit a normal page URL to see share mode
Visit with ?ref=YOURCODE to see claim mode

Form submission fails

Make sure your site’s domain is verified for your brand, under Admin → Domains