Purpose: This article explains how to integrate the SocialLadder widget into your website, configure its behavior, and support different user scenarios such as existing ambassadors, invited users, and new users.
Context: The SocialLadder widget allows customers to view referral links, promo codes, or both directly within your site. Integration is done via a simple script tag with configurable parameters that control display style, content type, and user identification.
Script Installation
Instructions
Identify where on your website you want the widget to appear.
Add the following <script> tag to your HTML at that location:\
HTML
<script
src="https://socialladder.rkiapps.com/SLWeb/sl-widgets.js"
data-area-guid="YOUR_AREA_GUID"
data-customer-id="CUSTOMER_ID"
data-referral-config="Referrals"
data-display-mode="inline">
</script>
3. Replace the placeholder values with your actual program and customer identifiers.
Required Parameters
The following parameters are required for the widget to function correctly:
Parameter | Description |
data-area-guid | Your SocialLadder program identifier (GUID format). Can be replaced by data-pixel-tracking-code. |
data-pixel-tracking-code | Alternative to data-area-guid for identifying the area using a pixel tracking code. |
data-customer-id | Unique identifier for the customer from your system. |
Optional Parameters
Parameter | Default | Description |
data-referral-config | Referrals | Widget content type: Referrals, PromoCodes, or ReferralsAndPromoCodes. |
data-display-mode | inline | Display style: inline, popup, or floating. |
data-first-name | – | Customer’s first name (required for new user creation). |
data-last-name | – | Customer’s last name (required for new user creation). |
data-email-address | – | Customer’s email address (required for new user creation). |
data-container-id | slwidgets-widget-container | Specify a custom ID for the widget container element. Useful when embedding multiple widgets on the same page or when you need to target the widget container with custom CSS/JavaScript |
data-auto-load | true | Controls whether the widget loads automatically on page load. |
data-retrieve-linked-user | true | Returns referral links from linked users if enabled. |
Widget Configuration Options
Referral Content Types
Referrals
Displays only referral links.PromoCodes
Displays only promo codes.ReferralsAndPromoCodes
Displays both referral links and promo codes.
Display Mode Options
inline
The widget appears exactly where the script is placed.
popup
The widget appears in a modal popup with an overlay.
floating
The widget appears as a floating element in the bottom-right corner of the page.
User Scenarios
Scenario 1: Existing Ambassador
Description:
The customer already exists in SocialLadder and has active campaigns.
Required parameters:
Data-area-guid
data-customer-id
data-retrieve-linked-user
HTML
<script
src="https://socialladder.rkiapps.com//SLWeb/sl-widgets.js"
data-area-guid="12345678-1234-1234-1234-123456789abc"
data-customer-id="CUST_001"
data-retrieve-linked-user="true"
data-referral-config="ReferralsAndPromoCodes">
</script>
Scenario 2: Non-registered User
Description:
The customer was imported into SocialLadder but has not yet registered.
Required parameters:
Data-area-guid
data-customer-id
HTML
<script
src="https://socialladder.rkiapps.com//SLWeb/sl-widgets.js"
data-area-guid="12345678-1234-1234-1234-123456789abc"
data-customer-id="CUST_002"
data-referral-config="Referrals">
</script>
Scenario 3: New User (Auto-Creation)
Description:
The customer does not exist in SocialLadder and will be automatically created if program settings allow it.
Required parameters:
data-area-guid
data-customer-id
data-first-name
data-last-name
data-email-address
HTML
<script
src="https://socialladder.rkiapps.com/SLWeb/sl-widgets.js"
data-area-guid="12345678-1234-1234-1234-123456789abc"
data-customer-id="CUST_003"
data-first-name="John"
data-last-name="Doe"
data-email-address="john.doe@example.com"
data-referral-config="ReferralsAndPromoCodes">
</script>
Note:
User creation depends on your program configuration. If auto-creation is disabled, the widget will not display for new users even when all parameters are provided.
Important: Widget HTML Structure
The widget relies on specific internal container IDs to control visibility and behavior.
Do not modify the following IDs:
ID | Purpose |
sl-widget-referral-link | Container for referral links |
sl-widget-promo-code | Container for promo codes |
⚠️ Modifying or removing these IDs will break widget functionality.