Embeddable Elements
Embedded elements are ready-made UI components that are 100% customizable, and can be quickly inserted into your HTML for displaying campaign and participant information inline on your webpage.

What are embeddable elements?

  • Embeddable elements are individual components that make up the contents of the GrowSurf window. They inherit the same styles and dynamic behavior that you see in the GrowSurf window -- but embeddable elements can be 100% customized using HTML data attributes.
    • You can configure each component's styles by changing your campaign's Theme (in the Design step of the Campaign Editor), or you can use data attributes to override and completely customize styles.
  • Just like the GrowSurf window, embeddable elements have two UI states that display differently to New Visitors ("no auth" state) and to Participants ("auth" state)
Important Note: You must have the GrowSurf Universal Code installed within the same webpage that you are using embeddable elements on.
Important Note: If you see the "no auth" state when you are expecting to see the "auth" state, it is most likely because you have participant authentication enabled for your campaign and there is no cookie saved on the participant's browser. Please see this article for more details.
Tip for Troubleshooting Styling: 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.
1
growsurf.initElements();
Copied!

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).
The embedded form has two different UI states
Example usage:
Basic
100% customized
1
<div data-grsf-block-form></div>
Copied!
1
<div data-grsf-block-form
2
data-grsf-email="[email protected]"
3
data-grsf-first-name="Gavin"
4
data-grsf-last-name="Belson"
5
data-grsf-metadata="{'company': 'Hooli, Inc', 'companySize': 10000}"
6
data-grsf-label-style="{'color': '#515151', 'font-size': '10px'}"
7
data-grsf-gdpr-paragraph-style="{'color': '#222222', 'font-size': '11px'}"
8
data-grsf-gdpr-checkbox-style="{'color': '#222222', 'font-size': '11px'}"
9
data-grsf-button-style="{'background-color': '#5890E7', 'color': '#fcfcfc', 'font-family': 'Sans', 'font-size': '12px'}"
10
data-grsf-link-style="{'color': '#515151'}"
11
data-grsf-field-first-name-label="Your First Name"
12
data-grsf-field-first-name-placeholder="Your First Name"
13
data-grsf-field-first-name-label="Your Last Name"
14
data-grsf-field-first-name-placeholder="Your Last Name"
15
data-grsf-email-button-style="{'background-color': '#5890E7', 'color': '#fcfcfc', 'font-family': 'Arial', 'font-size': '12px'}"
16
data-grsf-email-button-text="Share"
17
data-grsf-email-button-message="I just saved $X,XXX by using this service! {{shareUrl}}"
18
data-grsf-email-button-subject="Check this out friend"
19
data-grsf-facebook-button-style="{'background-color': '#5890E7', 'font-family': 'Courier New', 'font-size': '12px'}"
20
data-grsf-facebook-button-text="Share"
21
data-grsf-facebook-button-message="I just saved $X,XXX by using this service! {{shareUrl}}"
22
data-grsf-twitter-button-style="{'background-color': '#5890E7', 'font-family': 'Arial', 'font-size': '12px'}"
23
data-grsf-twitter-button-text="Share"
24
data-grsf-twitter-button-message="I just saved $X,XXX by using this service! {{shareUrl}}"
25
data-grsf-share-instructions="Share this unique link with your friends"
26
data-grsf-share-instructions-style="{'padding': '10px'}"
27
data-grsf-copy-link-button-text="Copy Link"
28
data-grsf-copy-link-container-style="{'padding': '10px'}"
29
data-grsf-redirect-url="https://replaceme.com">
30
</div>
Copied!
Data attributes:
HTML Attribute
Data Type
Description
data-grsf-block-form
N/A
(Required) This attribute turns any HTML element into an embedded form.
data-grsf-email
String
(Optional) If provided with a valid email address, a new participant will be created, or an existing participant will be returned β€” and their unique referral link and social share buttons will be displayed.
data-grsf-first-name
String
(Optional) If provided with data-grsf-email, then this value will be saved as the new participant's first name property.
​
If the participant already exists in the referral campaign, then this attribute will be ignored.
data-grsf-last-name
String
(Optional) If provided with data-grsf-email, then this value will be saved as the new participant's last name property.
​
If the participant already exists in the referral campaign, then this attribute will be ignored.
data-grsf-metadata
Object
(Optional) If provided with data-grsf-email, then this value will be saved as the new participant's metadata.
​
If the participant already exists in the referral campaign, then this attribute will be ignored.
data-grsf-gdpr-paragraph-style
Object
(Optional) Adds inline styles to the GDPR consent paragraph text (if GDPR enabled).
data-grsf-gdpr-checkbox-style
Object
(Optional) Adds inline styles to the GDPR consent checkbox text (if GDPR is enabled).
data-grsf-label-style
Object
(Optional) Adds inline styles to the form input labels.
data-grsf-button-style
Object
(Optional) Adds inline styles to any button elements.
data-grsf-link-style
Object
(Optional) Adds custom styles to any link elements.
data-grsf-field-*-label
String
(Optional) Sets the label text for the targeted input field.
​
Replace * with one of the following options: email, first-name, last-name, custom-field.
Example: data-grsf-field-first-name-label.
Custom fields are supported, so if you have an input field called "Phone Number", you would set data-grsf-field-phone-number-label (make sure to follow kebab-case).
data-grsf-field-*-placeholder
String
(Optional) Sets the placeholder text for the targeted input field.
​
Replace * with one of the following options: email, first-name, last-name, custom-field.
Example: data-grsf-field-first-name-placeholder.
Custom fields are supported, so if you have an input field called "Phone Number", you would set data-grsf-field-phone-number-placeholder (make sure to follow kebab-case).
data-grsf-*-button-style
Object
(Optional) Adds inline styles to the targeted social share button.
​
Replace * with one of the following options: email, facebook, twitter, pinterest, linkedin, sms, messenger, whatsapp, wechat.
​
Example: data-grsf-facebook-button-style.
data-grsf-*-button-text
String
(Optional) Sets the text of the targeted social share button.
​
Replace * with one of the following options: email, facebook, twitter, pinterest, linkedin, sms, messenger, whatsapp, wechat.
​
Example: data-grsf-facebook-button-text.
data-grsf-*-button-message
String
(Optional) Sets the pre-populated message of the targeted social share button. Replace * with one of the following options: email, facebook, twitter, pinterest, sms, whatsapp.
Example: data-grsf-facebook-button-message. Include {{shareUrl}} to dynamically set the participant's Share URL within the pre-populated message.
To change the subject line for email messages, set data-grsf-email-button-subject.
data-grsf-share-instructions
String
(Optional) Sets the text of the share instructions (these instructions are only visible when the participant is in the auth state).
data-grsf-share-instructions-style
Object
(Optional) Adds inline styles to the share instructions.
data-grsf-copy-link-button-text
String
(Optional) Sets the text of the 'Copy Link' button.
data-grsf-copy-link-container
Object
(Optional) Adds inline styles to the container of the input box and Copy Link button.
data-grsf-redirect-url
String
(Optional) Redirects to the given URL upon form submission

Embedded Invite

The embedded invite is an element that lets a participant send a bulk email invite to their friends/family.
The embedded invite has two different UI states
Example usage:
Basic
100% customized
1
<div data-grsf-block-invite></div>
Copied!
1
<div data-grsf-block-invite
2
data-grsf-email="[email protected]"
3
data-grsf-instructions-text="Invite your friends/family!"
4
data-grsf-instructions-style="{'text-align': 'left'}"
5
data-grsf-label-style="{'font-weight': 'bold'}"
6
data-grsf-input-placeholder-text="Enter email addresses here"
7
data-grsf-preview-link-text="Preview your message"
8
data-grsf-preview-subject-label="Email Subject"
9
data-grsf-preview-subject-placeholder="Check this out"
10
data-grsf-preview-subject="Check this out"
11
data-grsf-preview-message-label="Email Message"
12
data-grsf-preview-message-placeholder="I just saved $X,XXX by using this service! {{shareUrl}}"
13
data-grsf-preview-message="I just saved $X,XXX by using this service! {{shareUrl}}"
14
data-grsf-link-style="{'color': '#8885E1'}"
15
data-grsf-submit-button-text="Send Invite To Friends"
16
data-grsf-button-style="{'background-color': '#5890E7', 'text-transform': 'initial', 'font-family': 'Arial', 'color': '#FFFFFF', 'border-radius': '6px' }"
17
data-grsf-contact-pill-style="{'background-color': '#8885E1', 'color': '#fff'}"
18
data-grsf-google-button-style="{'background-color': '#5890E7', 'font-size': '8px', 'border-radius': '0', 'min-width': '320px', 'font-weight': '100'}"
19
data-grsf-google-button-text="Import from Google"
20
data-grsf-contact-picker-search-text="Search for contacts"
21
data-grsf-contact-picker-suggestions-text="Here are some suggestions"
22
data-grsf-contact-picker-results-text="Your search results"
23
data-grsf-contact-picker-load-more-button-text="Load More Contacts">
24
</div>
Copied!
Data attributes:
HTML Attribute
Data Type
Description
data-grsf-block-invite
N/A
(Required) This attribute turns any HTML element into an embedded invite.
data-grsf-email
String
(Optional) The email of the participant to display the invite element for. If the participant does not yet exist within the campaign, they will be newly added.
data-grsf-instructions-text
String
(Optional) Sets the text of the invite instructions.
data-grsf-instructions-style
Object
(Optional) Adds inline styles to the invite instructions.
data-grsf-label-style
Object
(Optional) Adds inline styles to the form input labels.
data-grsf-input-placeholder-text
String
(Optional) Sets the placeholder text of the email address input field.
data-grsf-preview-link-text
String
(Optional) Sets the text of the preview link. If no value is provided, the button text will default to the GrowSurf window invite preview link text.
data-grsf-preview-subject-label
String
(Optional) Sets the label text for the email subject line in the preview section.
data-grsf-preview-subject-placeholder
String
(Optional) Sets the placeholder text for the email subject line in the preview section.
data-grsf-preview-subject
String
(Optional) Sets the pre-populated value for the email subject line in the preview section.
data-grsf-preview-message-label
String
(Optional) Sets the label text for the email message body in the preview section.
data-grsf-preview-message-placeholder
String
(Optional) Sets the placeholder text for the email message body in the preview section.
data-grsf-preview-message
String
(Optional) Sets the pre-populated value for the email message body in the preview section.
​
Include {{shareUrl}} to dynamically set the participant's Share URL within the pre-populated message.
data-grsf-link-style
Object
(Optional) Adds inline styles to any link elements. If no value is provided, the link styles will inherit from the GrowSurf window link styles.
data-grsf-submit-button-text
String
(Optional) Sets the text of the submit button. If no value is provided, the button text will default to the GrowSurf window invite submit button text.
data-grsf-button-style
Object
(Optional) Adds inline styles to any button elements. If no value is provided, the button styles will inherit from the GrowSurf window button styles.
data-grsf-contact-pill-style
Object
(Optional) Adds custom styles to the contact pills, which appear underneath the email address input field when email addresses have been entered. If no value is provided, the button styles will inherit from the GrowSurf window contact pill styles.
data-grsf-*-button-style
Object
(Optional) Adds inline styles to the targeted address book button. If no value is provided, the button styles will inherit from the GrowSurf window button styles.
​
Replace * with one of the following options: google.
​
Example: data-grsf-google-button-style.
data-grsf-*-button-text
String
(Optional) Sets the text of the targeted address book button. If no value is provided, the button text will default to the GrowSurf window invite Google Contacts button text.
​
Replace * with one of the following options: google.
​
Example: data-grsf-google-button-text.
data-grsf-contact-picker-search-text
String
(Optional) Sets the "Search" text in the contact picker.
data-grsf-contact-picker-suggestions-text
String
(Optional) Sets the "Suggestions" text in the contact picker.
data-grsf-contact-picker-results-text
String
(Optional) Sets the "Results" text in the contact picker.
data-grsf-contact-picker-load-more-button-text
String
(Optional) Sets the "Load More" button text in the contact picker.

Embedded Button

The embedded button is an element that opens up the GrowSurf window when clicked.
The embedded button has one UI state
Example usage:
Basic
100% customized
1
<div data-grsf-block-button></div>
Copied!
1
<div data-grsf-block-button
2
data-grsf-email="[email protected]"
3
data-grsf-button-text="Join My Referral Program"
4
data-grsf-button-style="{'background-color': '#5890E7', 'text-transform': 'initial', 'font-family': 'Arial', 'color': '#FFFFFF', 'border-radius': '6px' }">
5
</div>
Copied!
Data attributes:
HTML Attribute
Data Type
Description
data-grsf-block-button
N/A
(Required) This attribute turns any HTML element into an embedded button.
data-grsf-email
String
(Optional) The email of the participant to display the button element for. If the participant does not yet exist within the campaign, they will be newly added.
data-grsf-button-text
String
(Optional) Sets the text of the embedded button. If no value is provided, the button text will default to the GrowSurf window signup form button text.
data-grsf-button-style
Object
(Optional) Adds inline styles to the button. If no value is provided, the button styles will inherit from the GrowSurf window button styles.

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).
The embedded leaderboard has two different UI states
Example usage:
Basic
100% customized
1
<div data-grsf-block-leaderboard></div>
Copied!
1
<div data-grsf-block-leaderboard
2
data-grsf-email="[email protected]"
3
data-grsf-button-style="{'background-color': 'red', 'font-family': 'Sans'}"
4
data-grsf-link-style="{'background-color': 'red', 'color': '#CCCCCC', 'font-family': 'Courier New'}"
5
data-grsf-leaderboard-title="Current Standings"
6
data-grsf-leaderboard-title-style="{'font-weight': '100', 'font-size': '36px'}"
7
data-grsf-rank-column-text="Position"
8
data-grsf-participants-column-text="People"
9
data-grsf-referrals-column-text="Count"
10
data-grsf-winners-icon-style="{'background-color': 'green', 'color': 'CCCCCC'}"
11
data-grsf-header-style="{'display':'none'}"
12
data-grsf-list-item-style="{'border-radius': '0', 'padding': '0', 'box-shadow': 'none', 'align-items': 'flex-start'}">
13
</div>
Copied!
Data attributes:
HTML Attribute
Data Type
Description
data-grsf-block-leaderboard
N/A
(Required) This attribute turns any HTML element into an embedded leaderboard.
data-grsf-email
String
(Optional) The email of the participant to display the leaderboard element for. If the participant does not yet exist within the campaign, they will be newly added.
data-grsf-button-style
Object
(Optional) Adds inline styles to any buttons within the leaderboard.
data-grsf-link-style
Object
(Optional) Adds custom styles to any link elements within the embedded leaderboard.
data-grsf-leaderboard-title
String
(Optional) Sets the text of the title above the leaderboard.
data-grsf-leaderboard-title-style
Object
(Optional) Adds inline styles to the text of the title above the leaderboard.
data-grsf-rank-column-text
String
(Optional) Sets the text of the rank column header.
data-grsf-participants-column-text
String
(Optional) Sets the text of the participants column header.
data-grsf-winners-icon-style
Object
(Optional) Adds inline styles to the winner icon that is displayed next to the winner.
data-grsf-header-style
Object
(Optional) Adds inline styles to the header that is displayed above the leaderboard list.
data-grsf-list-item-style
Object
(Optional) Adds inline styles to the list items that are displayed within the leaderboard list.

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).
The embedded rewards has two different UI states
Example usage:
Basic
100% customized
1
<div data-grsf-block-rewards></div>
Copied!
1
<div data-grsf-block-rewards
2
data-grsf-email="[email protected]"
3
data-grsf-card-style="{'background-color': '#FDFDFD', 'box-shadow': 'none', 'border-radius': '12px', 'padding': '10px'}"
4
data-grsf-title-style="{'font-size': '16px'}"
5
data-grsf-horizontal="true"
6
data-grsf-horizontal-scroll="true"
7
data-grsf-required-referrals-text="Req Refs"
8
data-grsf-required-referrals-style="{'background-color': '#117a8b', 'color': '#CCCCCC'}"
9
data-grsf-top-referrers-text="Top ambassadors"
10
data-grsf-top-referrers-style="{'background-color': '#5890E7', 'color': '#FFFFFF'}"
11
data-grsf-reward-limit-text="per winner"
12
data-grsf-reward-monthly-limit-text="per sunny month"
13
data-grsf-reward-limit-style="{'color': 'black'}"
14
data-grsf-progress-icon-style="{'background-color': '#d39e00', 'color': '#000000'}"
15
data-grsf-max-progress-icons="6"
16
data-grsf-footer-style="{'text-align': 'center', 'color': '#E7B558'}">
17
</div>
Copied!
Data attributes:
HTML Attribute
Data Type
Description
data-grsf-block-rewards
N/A
(Required) This attribute turns any HTML element into embedded rewards.
data-grsf-email
String
(Optional) The email of the participant to display the rewards element for. If the participant does not yet exist within the campaign, they will be newly added.
data-grsf-card-style
Object
(Optional) Adds custom styles to the reward card(s).
data-grsf-title-style
Object
(Optional) Adds custom styles to the reward title.
data-grsf-horizontal
Boolean
(Optional) Displays the rewards in a horizontal format.
data-grsf-horizontal-scroll
Boolean
(Optional) If data-grsf-horizontal is set to true, this property will display rewards in a single scrollable row.
data-grsf-required-referrals-text
String
(Optional) Sets the "required referrals" text. This is the text that is used to indicate the number of referrals a participant must make in order to earn the reward.
​
NOTE
This element only displays for non-Leaderboard reward types.
data-grsf-required-referrals-style
Object
(Optional) Adds custom inline styling to the "required referrals" tag displayed for non Leaderboard reward types. This is the element within the reward that is used to indicate the number of referrals a participant must make in order to earn the reward.
data-grsf-top-referrers-text
String
(Optional) Updates the "top referrers" text displayed for Leaderboard reward types. This is the text that is used to indicate the reward goal for Leaderboard type rewards.
​
NOTE
This element only displays for Leaderboard reward types
data-grsf-top-referrers-style
Object
(Optional) Adds custom styling to the "top referrers" tag. This is the element within the Leaderboard reward that is used to indicate the rank threshold the participant must reach in order to earn the reward.
data-grsf-reward-limit-text
String
(Optional) Updates the "max per referrer" text displayed within the reward.
data-grsf-reward-monthly-limit-text
String
(Optional) Updates the "per month" text displayed within the reward.
data-grsf-reward-limit-style
String
(Optional) Adds inline styling for the "max per referrer" text and/or "per month" text displayed within the reward.
data-grsf-progress-icon-style
Object
(Optional) Updates the inline styling of the progress icon style used to display the progress the participant has made in order to achieve the reward goal.
​
NOTE
Only background-color , color, and display style properties are currently supported.
data-grsf-max-progress-icons
Number
(Optional) Updates the max number of progress icons to display.
data-grsf-footer-style
String
(Optional) Adds inline styles to the footer text messages (e.g, "manual approval" footer text, "max rewards shown" footer text).

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
The embedded stats has only one UI state (for participants)
Example usage:
Basic
100% customized
1
<div data-grsf-block-stats></div>
Copied!
1
<div data-grsf-block-stats
2
data-grsf-email="[email protected]"
3
data-grsf-referral-count-style="{'background-color': '#007bff', 'color': '#ffffff', 'border-radius': '20px', 'max-width': '260px', 'width': 'fit-content'}"
4
data-grsf-referral-count-text="total referrals made"
5
data-grsf-rank-style="{'background-color': '#007bff', 'color': '#ffffff', 'border-radius': '20px', 'max-width': '260px', 'width': 'fit-content'}"
6
data-grsf-rank-text="Position">
7
</div>
Copied!
Data attributes:
HTML Attribute
Data Type
Description
data-grsf-block-stats
N/A
(Required) This attribute turns any HTML element into embedded stats
data-grsf-email
String
(Optional) The email of the participant to display stats for. If the participant does not yet exist within the campaign, they will be newly added.
data-grsf-referral-count-style
Object
(Optional) Adds inline styling to the element that displays the participant's referral count.
data-grsf-referral-count-text
String
(Optional) Sets the text that is used to label the participant's referral count.
data-grsf-rank-style
Object
(Optional) Adds inline styling to the element that displays the participant's rank.
data-grsf-rank-text
String
(Optional) Sets the text that labels the participant's rank.

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
The embedded next milestone has only one UI state (for participants)
Example usage:
Basic
100% customized
1
<div data-grsf-block-next-milestone></div>
Copied!
1
<div data-grsf-block-next-milestone
2
data-grsf-milestones="[
3
{'goal': 2, 'prefix': 'You are only', 'suffix': 'referrals away from winning a free t-shirt!', 'monthly': false},
4
{'goal': 5, 'prefix': 'You are only', 'suffix': 'referrals away from winning a free jacket!', 'monthly': false},
5
{'goal': 10, 'prefix': 'You are only', 'suffix': 'referrals away from a free trip to Hawaii!', 'monthly': false}
6
]"
7
data-grsf-only-show-number="true"
8
data-grsf-email="[email protected]"></div>
Copied!
Data attributes:
HTML Attribute
Data Type
Description
data-grsf-block-stats
N/A
(Required) This attribute turns any HTML element into an embedded next milestone
data-grsf-milestones
Array<Object>
(Optional) Set this attribute if you want to override your campaign's milestone rewards so that you can define your own milestone rewards as an Array. Each Object should follow this format:
  • goal (Number) = The number of referrals needed to unlock the milestone reward
  • prefix (Text) = The text displayed before the goal
  • suffix (Text) = The text displayed after the goal
  • monthly (Boolean) = Set to true to use the participant's monthly referral count (i.e, if the milestone reward resets every month)
The following is an example Object: { 'goal': 2,
'prefix': 'You are only ',
'suffix': ' referrals away from winning a free shirt!',
'monthly': false }
data-grsf-email
String
(Optional) The email of the participant to display their next milestone reward to. If the participant does not yet exist within the campaign, they will be newly added.
data-grsf-only-show-number
Boolean
(Optional) If set to true, then only the participant's remaining referrals will be displayed as a number (the prefix and suffix values will be removed)

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
The embedded stats has only one UI state (for participants)
Example usage:
Basic
100% customized
1
<div data-grsf-block-referral-status></div>
Copied!
1
<div data-grsf-block-referral-status
2
data-grsf-email="[email protected]"
3
data-grsf-referral-status-title="Referral Status"
4
data-grsf-referral-status-title-style="{'font-weight': '100', 'font-size': '36px'}"
5
data-grsf-your-referral-column-text="Your Friend"
6
data-grsf-status-column-text="Their Status"
7
data-grsf-button-style="{'background-color': '#5890E7', 'color': '#fcfcfc', 'font-size': '12px', 'border-radius': '100%'}"
8
data-grsf-header-style="{'display':'none'}"
9
data-grsf-list-item-style="{'border-radius': '0', 'padding': '0', 'box-shadow': 'none', 'align-items': 'flex-start'}"
10
data-grsf-link-style="{'background-color': '#8885E1', 'color': '#fff'}">
11
</div>
Copied!
Data attributes:
HTML Attribute
Data Type
Description
data-grsf-block-referral-status
N/A
(Required) This attribute turns any HTML element into an embedded referral status element.
data-grsf-email
String
(Optional) The email of the participant to display the referral status element for. If the participant does not yet exist within the campaign, they will be newly added.
data-grsf-button-style
Object
(Optional) Adds inline styles to any buttons within the referral status element.
data-grsf-link-style
Object
(Optional) Adds custom styles to any link elements within the embedded referral status element.
data-grsf-referral-status-title
String
(Optional) Sets the text of the title above the referral status list.
data-grsf-referral-status-title-style
Object
(Optional) Adds inline styles to the text of the title above the referral status list.
data-grsf-status-column-text
String
(Optional) Sets the text of the Status column header.
data-grsf-your-referral-column-text
String
(Optional) Sets the text of the Your Referral column header.
data-grsf-header-style
Object
(Optional) Adds inline styles to the header that is displayed above the referrals list.
data-grsf-list-item-style
Object
(Optional) Adds inline styles to the list items that are displayed within the referrals list.
Last modified 6mo ago