Embeddable Elements

Embedded elements can be quickly inserted into your webpage or web app. They allow your users to view their referral links without having to sign in as an extra step.

What are embeddable elements?

  • Embeddable elements are one-line-of-code inline block elements that you can insert into your web app for a whitelabel referral portal experience for your signed-in users.

  • Embeddable elements can be inserted into any webpage and can be customized using HTML data attributes.

  • Want to change basic styles? Login to GrowSurf and navigate to Edit Campaign > 2. Design > Theme. Or use data attributes to apply style overrides.

  • Embeddable elements have two UI states that display differently to New Visitors ("no auth" state) and to Participants ("auth" state)

Important Notes:

  • You must have the GrowSurf Universal Code installed within the same webpage that you are using embeddable elements on.

  • If you see the "no auth" state when you are expecting to see the "auth" state, it may be because participant authentication is enabled for your campaign and there may not be a saved cookie already on the participant's browser. Please see this article for more details.

  • If you don't see styles applied to embedded elements, please check your browser developer console for errors/warnings. Data attributes must be parsable by the JSON.parse() function.

(Optional) Forcefully re-rendering embeddable elements

Although embedded elements listen for changes in data attributes and update dynamically, if you run into issues where the embedded elements do not render/refresh, you can force re-rendering. This may be useful if you are working with dynamic data (such as as setting data-grsf-email to the user's email in the Embedded Form).

To force re-rendering, call growsurf.initElements(), which destroys all embeddable elements in the DOM and forces GrowSurf to re-render them.

growsurf.initElements();

Please make sure to wait for the GrowSurf Universal Code to load by using the grsfReady event listener. See an example here.

For single-page applications (SPAs), there may be issues with embeddable elements rendering on the page due to how URL routes are handled. In this case, calling growsurf.initElements() may not work and you will need to call growsurf.init() to re-initialize GrowSurf to make the embeddable elements render.

Embedded Form

The embedded form is an element that has two different UI states.

  • For new visitors, the signup form is shown (this is the "no auth" state).

  • For participants, their unique referral link with share buttons are displayed (this is the "auth" state).

Example usage:

This is the bare minimum code required to display this element.

<div data-grsf-block-form></div>

Data attributes:

Embedded Invite

The embedded invite is an element that lets a participant send a bulk email invite to their friends/family.

Example usage:

This is the bare minimum code required to display this element.

<div data-grsf-block-invite></div>

Data attributes:

Embedded Button

The embedded button is an element that opens up the GrowSurf window when clicked.

Example usage:

This is the bare minimum code required to display this element.

<div data-grsf-block-button></div>

Data attributes:

Embedded Leaderboard

The embedded leaderboard is an element that has two different UI states.

  • For new visitors, the leaderboard is displayed (this is the "no auth" state).

  • For participants, the leaderboard is displayed with their row highlighted (this is the "auth" state).

Example usage:

This is the bare minimum code required to display this element.

<div data-grsf-block-leaderboard></div>

Data attributes:

Embedded Rewards

The embedded rewards is an element that has two different UI states.

  • For new visitors, the campaign rewards are displayed (this is the "no auth" state).

  • For participants, the campaign rewards are displayed with the participant's progress being displayed next to each one (this is the "auth" state).

Example usage:

This is the bare minimum code required to display this element.

<div data-grsf-block-rewards></div>

Data attributes:

Embedded Stats

The embedded stats is an element that displays a participant's referral statistics and rank.

  • The referral count text ("X referrals made") will only be displayed if you have at least one non-Leaderboard-type reward

  • The rank text ("#X your rank") will only be displayed if you have at least one Leaderboard-type reward

Example usage:

This is the bare minimum code required to display this element.

<div data-grsf-block-stats></div>

Data attributes:

Embedded Next Milestone

The embedded next milestone is an element that displays how many referrals a participant needs to make to unlock the next/upcoming milestone reward (only applies to milestone rewards).

  • In the Campaign Editor, make sure to update your milestone reward's advanced settings to set the Next Milestone prefix and suffix values (see image).

  • If the participant has reached all milestones, then nothing will be rendered

Example usage:

This is the bare minimum code required to display this element.

<div data-grsf-block-next-milestone></div>

Data attributes:

Embedded Referral Status

The embedded referral status lets a participant view the individual progress of their referrals and email invitees.

For email invitees, if they have not yet signed up, their email address will display as obfuscated

Example usage:

This is the bare minimum code required to display this element.

<div data-grsf-block-referral-status></div>

Data attributes:

Last updated