Requirement
The user must be logged in to access the application and dashboard pages.
If they are not logged in, you must show a clear login/sign-up button or message, or redirect them directly to the login page.
After they log in or create an account, redirect them back to the application page using the same URL.
How To Embed Ambassador Application
Create an application in your SocialLadder portal. This can be found by going to the Settings > Account Settings > Manage Applications section.
Find the application you want to embed, Click on 'Edit' button under Actions tab.
Copy the Area GUID and Application GUID from the application slide out. See image below for reference:
Copy the code block below and add it to the page that you wish to host the Ambassador Application on.
<div id="slWebAppWidget"></div>
<script src="https://socialladder.rkiapps.com/SLWeb/slweb-frame.js"></script>
<script>
var areaGuid = "[AREA_GUID]";
var appGuid = getParameterFromURLByName("appGuid");
if (!appGuid) {
appGuid = "[APPLICATION_GUID]";
}
var campGuid = getParameterFromURLByName("campGuid");
var resGuid = getParameterFromURLByName("resGuid");
var crmShopName = "[CRM_SHOP_NAME]";
var customerEmail = "{{ customer.email }}";
var customerId = "{{ customer.id }}";
loadSLApplicationWidget(areaGuid, appGuid, customerEmail, customerId, campGuid, crmShopName, resGuid);
</script>
Paste the Area GUID and Application GUID in the respective areas in their loadSLApplicationWidget snippet.
General Notes about the above code block:
The div tag with
id= "slWebAppWidget"is important in the snippet as the script will look for that ID to load the application iframe inside that div.The sequence of the div & script should be exactly the same as shown in the snippet.
Specific Notes about the loadSLApplicationWidget string:
loadSLApplicationWidget(areaGuid, appGuid, customerEmail, customerId, campGuid, crmShopName, resGuid);
areaGuid: This can be found with the steps above, under the Manage Application section of the settings.
appGuid: This can be found with the steps above, under the Manage Application section of the settings.
customer.email: This is the Email Address of the user logged in to the page you are hosting the application on. For example, a user logged in to their Shopify account.
customer.id: External user ID (E.g. Shopify Customer ID).
We will use this in the SSO login to get user’s deviceUUID and log them in directly into SLWeb.
campGuid: If an ambassador is invited manually from the SocialLadder portal, we will add the campGuid into the Shopify URL. This information is automatically captured.
crmShopName: This is the Pixel Tracking Code created in the SocialLadder Portal by your Implementation team. This information is automatically captured.
resGuid: Allows the applicant to start where they left off on the application.
This only applies when applicants are connecting their Instagram or reloading the form.
We will add the resGuid into the Shopify URL. This information is automatically captured.
Troubleshooting
Fix Syntax Errors: Be sure to copy the code block exactly as shown, including line breaks and indentation, to avoid syntax errors.
Ensure consistent use of parameter syntax: Use square brackets
[ ]for hardcoded values and double braces{{ }}for dynamic Shopify Liquid variables.Adapt Syntax According to Programming Language: If embedding in a different environment (e.g., JavaScript framework), you may need to adapt the syntax accordingly.