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.
The Embedded Form and Embedded Invite
- 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.
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.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
With auth
100% customized
This is the bare minimum code required to display this element.
<div data-grsf-block-form></div>
If you have users logged into your website or web app, you can pass their email address in so that they always see their unique referral link instead of a signup form.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-form
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"></div>
Here's what you would have in your HTML file:
<div data-grsf-block-form></div>
And here's what you would have in your JavaScript (make sure to use the
grsfReady event listener anytime you call any growsurf functions):// Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively.
growsurf.addParticipant({
email: "[email protected]",
firstName: "Gavin",
lastName: "Belson"
});
This is an example that contains all of the available data attributes that can be customized.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-form
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"
data-grsf-metadata="{'company': 'Hooli, Inc', 'companySize': 10000}"
data-grsf-label-style="{'color': '#515151', 'font-size': '10px'}"
data-grsf-gdpr-paragraph-style="{'color': '#222222', 'font-size': '11px'}"
data-grsf-gdpr-checkbox-style="{'color': '#222222', 'font-size': '11px'}"
data-grsf-button-style="{'background-color': '#5890E7', 'color': '#fcfcfc', 'font-family': 'Sans', 'font-size': '12px'}"
data-grsf-link-style="{'color': '#515151'}"
data-grsf-field-first-name-label="Your First Name"
data-grsf-field-first-name-placeholder="Your First Name"
data-grsf-field-first-name-label="Your Last Name"
data-grsf-field-first-name-placeholder="Your Last Name"
data-grsf-email-button-style="{'background-color': '#5890E7', 'color': '#fcfcfc', 'font-family': 'Arial', 'font-size': '12px'}"
data-grsf-email-button-text="Share"
data-grsf-email-button-message="I just saved $X,XXX by using this service! {{shareUrl}}"
data-grsf-email-button-subject="Check this out friend"
data-grsf-facebook-button-style="{'background-color': '#5890E7', 'font-family': 'Courier New', 'font-size': '12px'}"
data-grsf-facebook-button-text="Share"
data-grsf-facebook-button-message="I just saved $X,XXX by using this service! {{shareUrl}}"
data-grsf-twitter-button-style="{'background-color': '#5890E7', 'font-family': 'Arial', 'font-size': '12px'}"
data-grsf-twitter-button-text="Share"
data-grsf-twitter-button-message="I just saved $X,XXX by using this service! {{shareUrl}}"
data-grsf-share-instructions="Share this unique link with your friends"
data-grsf-share-instructions-style="{'padding': '10px'}"
data-grsf-copy-link-button-text="Copy Link"
data-grsf-copy-link-container-style="{'padding': '10px'}"
data-grsf-redirect-url="https://replaceme.com">
</div>
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 |
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
With auth
100% customized
This is the bare minimum code required to display this element.
<div data-grsf-block-invite></div>
If you have users logged into your website or web app, you can pass their email address in so that they always see the element in the participant ("auth") view.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-invite
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"></div>
Here's what you would have in your HTML file:
<div data-grsf-block-invite></div>
And here's what you would have in your JavaScript (make sure to use the
grsfReady event listener anytime you call any growsurf functions):// Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively.
growsurf.addParticipant({
email: "[email protected]",
firstName: "Gavin",
lastName: "Belson"
});
This is an example that contains all of the available data attributes that can be customized.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-invite
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"
data-grsf-instructions-text="Invite your friends/family!"
data-grsf-instructions-style="{'text-align': 'left'}"
data-grsf-label-style="{'font-weight': 'bold'}"
data-grsf-input-placeholder-text="Enter email addresses here"
data-grsf-preview-link-text="Preview your message"
data-grsf-preview-subject-label="Email Subject"
data-grsf-preview-subject-placeholder="Check this out"
data-grsf-preview-subject="Check this out"
data-grsf-preview-message-label="Email Message"
data-grsf-preview-message-placeholder="I just saved $X,XXX by using this service! {{shareUrl}}"
data-grsf-preview-message="I just saved $X,XXX by using this service! {{shareUrl}}"
data-grsf-link-style="{'color': '#8885E1'}"
data-grsf-submit-button-text="Send Invite To Friends"
data-grsf-button-style="{'background-color': '#5890E7', 'text-transform': 'initial', 'font-family': 'Arial', 'color': '#FFFFFF', 'border-radius': '6px' }"
data-grsf-contact-pill-style="{'background-color': '#8885E1', 'color': '#fff'}"
data-grsf-google-button-style="{'background-color': '#5890E7', 'font-size': '8px', 'border-radius': '0', 'min-width': '320px', 'font-weight': '100'}"
data-grsf-google-button-text="Import from Google"
data-grsf-contact-picker-search-text="Search for contacts"
data-grsf-contact-picker-suggestions-text="Here are some suggestions"
data-grsf-contact-picker-results-text="Your search results"
data-grsf-contact-picker-load-more-button-text="Load More Contacts">
</div>
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. |
The embedded button is an element that opens up the GrowSurf window when clicked.
The embedded button has one UI state
Example usage:
Basic
With auth
100% customized
This is the bare minimum code required to display this element.
<div data-grsf-block-button></div>
If you have users logged into your website or web app, you can pass their email address in so that they always see the element in the participant ("auth") view.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-button
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"></div>
Here's what you would have in your HTML file:
<div data-grsf-block-button></div>
And here's what you would have in your JavaScript (make sure to use the
grsfReady event listener anytime you call any growsurf functions):// Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively.
growsurf.addParticipant({
email: "[email protected]",
firstName: "Gavin",
lastName: "Belson"
});
This is an example that contains all of the available data attributes that can be customized.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-button
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"
data-grsf-button-text="Join My Referral Program"
data-grsf-button-style="{'background-color': '#5890E7', 'text-transform': 'initial', 'font-family': 'Arial', 'color': '#FFFFFF', 'border-radius': '6px' }">
</div>
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. |
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
With auth
100% customized
This is the bare minimum code required to display this element.
<div data-grsf-block-leaderboard></div>
If you have users logged into your website or web app, you can pass their email address in so that they always see the element in the participant ("auth") view.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-leaderboard
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"></div>
Here's what you would have in your HTML file:
<div data-grsf-block-leaderboard></div>
And here's what you would have in your JavaScript (make sure to use the
grsfReady event listener anytime you call any growsurf functions):// Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively.
growsurf.addParticipant({
email: "[email protected]",
firstName: "Gavin",
lastName: "Belson"
});
This is an example that contains all of the available data attributes that can be customized.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-leaderboard
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"
data-grsf-button-style="{'background-color': 'red', 'font-family': 'Sans'}"
data-grsf-link-style="{'background-color': 'red', 'color': '#CCCCCC', 'font-family': 'Courier New'}"
data-grsf-leaderboard-title="Current Standings"
data-grsf-leaderboard-title-style="{'font-weight': '100', 'font-size': '36px'}"
data-grsf-rank-column-text="Position"
data-grsf-participants-column-text="People"
data-grsf-referrals-column-text="Count"
data-grsf-winners-icon-style="{'background-color': 'green', 'color': 'CCCCCC'}"
data-grsf-header-style="{'display':'none'}"
data-grsf-list-item-style="{'border-radius': '0', 'padding': '0', 'box-shadow': 'none', 'align-items': 'flex-start'}">
</div>
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. |
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
With auth
100% customized
This is the bare minimum code required to display this element.
<div data-grsf-block-rewards></div>
If you have users logged into your website or web app, you can pass their email address in so that they always see the element in the participant ("auth") view.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-rewards
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"></div>
Here's what you would have in your HTML file:
<div data-grsf-block-rewards></div>
And here's what you would have in your JavaScript (make sure to use the
grsfReady event listener anytime you call any growsurf functions):// Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively.
growsurf.addParticipant({
email: "[email protected]",
firstName: "Gavin",
lastName: "Belson"
});
This is an example that contains all of the available data attributes that can be customized.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-rewards
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"
data-grsf-card-style="{'background-color': '#FDFDFD', 'box-shadow': 'none', 'border-radius': '12px', 'padding': '10px'}"
data-grsf-title-style="{'font-size': '16px'}"
data-grsf-horizontal="true"
data-grsf-horizontal-scroll="true"
data-grsf-required-referrals-text="Req Refs"
data-grsf-required-referrals-style="{'background-color': '#117a8b', 'color': '#CCCCCC'}"
data-grsf-top-referrers-text="Top ambassadors"
data-grsf-top-referrers-style="{'background-color': '#5890E7', 'color': '#FFFFFF'}"
data-grsf-reward-limit-text="per winner"
data-grsf-reward-monthly-limit-text="per sunny month"
data-grsf-reward-limit-style="{'color': 'black'}"
data-grsf-progress-icon-style="{'background-color': '#d39e00', 'color': '#000000'}"
data-grsf-max-progress-icons="6"
data-grsf-footer-style="{'text-align': 'center', 'color': '#E7B558'}">
</div>
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). |
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
With auth
100% customized
This is the bare minimum code required to display this element.
<div data-grsf-block-stats></div>
If you have users logged into your website or web app, you can pass their email address in so that they always see their unique referral link instead of a signup form.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-stats
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"></div>
Here's what you would have in your HTML file:
<div data-grsf-block-stats></div>
And here's what you would have in your JavaScript (make sure to use the
grsfReady event listener anytime you call any growsurf functions):// Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively.
growsurf.addParticipant({
email: "[email protected]",
firstName: "Gavin",
lastName: "Belson"
});
This is an example that contains all of the available data properties that can be customized.
Note: If you are already setting
data-grsf-email, data-grsf-first-name, or data-grsf-last-name on another GrowSurf embedded element, then you do not need to set them here.<!-- Make sure to replace "[email protected]", "Gavin", and "Belson" with your logged-in user's email address, first name, and last name, respectively. -->
<div data-grsf-block-stats
data-grsf-email="[email protected]"
data-grsf-first-name="Gavin"
data-grsf-last-name="Belson"
data-grsf-referral-count-style="{'background-color': '#007bff', 'color': '#ffffff', 'border-radius': '20px', 'max-width': '260px', 'width': 'fit-content'}"
data-grsf-referral-count-text="total referrals made"
data-grsf-rank-style="{'background-color': '#007bff', 'color': '#ffffff', 'border-radius': '20px', 'max-width': '260px', 'width': 'fit-content'}"
data-grsf-rank-text="Position">
</div>
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 |