This document will go over the steps in embedding the SLWeb Module using SSO on your Shopify web pages. You should have your IT staff or web developer help with embedding the SLWeb Module iframe as there might be different code blocks needed based off of how you would like to embed the iframe. The sections covered in this article are:
SocialLadder Web Module Code Block
Shopify SSO API
Adding Metafields to Customers in Shopify
Adding SocialLadder as a Developer in Shopify
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 dashboard page using the same URL.
If they are not an ambassador yet, redirect them to the application page.
How To Embed SLWeb Module
SocialLadder Web Module Code Block
First, determine which web page you would like to host the SLWeb Module on. Then copy this code block below and add it to that page.
<div id="slWebFrame"></div>
<script src="https://socialladder.rkiapps.com/SLWeb/slweb-frame.js"></script>
<script>
{% if customer.metafields.social_ladder.deviceUUID %}
var areaGuid = "[AREA_GUID]";
var deviceUUID = "{{ customer.metafields.social_ladder.deviceUUID }}";
loadSLWebFrame(areaGuid, deviceUUID);
{% else %}
document.querySelector('#slWebFrame').innerHTML = '<p style="margin: 40px 0">Error! Please contact customer support at [CUSTOMER_SUPPORT_EMAIL]</p>';
{% endif %}
</script>
Notes about the above code block:
The div tag with
id=”slWebFrame”is important in the snippet as the script will look for that id to load slweb iframe inside that div.The sequence of the div & script should be exactly the same as shown in the snippet.
areaGuid: Will be provided from SocialLadder and is required.
deviceUUID: In order for SSO to work, the deviceUUID will be passed through the meta-fields.
If the deviceUUID is not passed, then it will show the error message show in the above code snippet.
Adding Metafields to Customers in Shopify
Once you have added the code block to your website, you will need to add a metafield to your customer section in Shopify. This will allow certain Ambassadors to see the SocialLadder Web Experience on your website when they are logged in.
Log in to your Shopify Admin portal, and click on Settings. Once you are on the Settings page, select Metafields from the menu, and then click Customers.
After clicking on Customers, you will need to add a metafield definition. To do this, click on Add Definition
Upon clicking on Add Definition, a pop-up where you can enter the Namespace and Key values will appear. Make sure to copy the values from the image below to set this up properly.
Name: Brand Ambassador (or if you want to call it something else that is fine)
Namespace and Key: social_ladder.ambassador (the period separates the namespace from the key, so the namespace is social_ladder and the key is ambassador)
Description: This Metafield will allow Brand Ambassadors to see the SocialLadder web module on our website.
Make sure to check the checkbox that exposes the metafield to the Storefront API Requests so that SocialLadder can display the Web Module.
Lastly, select the Content Type and set it to a Single line text. This will allow you to determine who is an ambassador and who is not from your Customer List in Shopify.
Once you have entered the values above, save the definition. You can now see this definition on your customers profiles in Shopify. If you want, you can also make changes to their profile in Shopify to state whether or not they are an ambassador through the true/false metafield.
Adding SocialLadder as a Developer App in Shopify
If you haven't done this already, we need to make sure SocialLadder is connected to your Shopify store. To do this, follow the steps below:
Log in to your Shopify account and Click on “Apps” on the left-side menu. On the Apps page, click on “Develop Apps” next to the customize your store button
Next, click on “Create an App”
For the App Name, type in “SocialLadder.” The App Developer field should automatically populate with the Shopify account you are logged in as
Once the app is created, you will land on the Overview screen. Here you can configure the Admin API and the Storefront API. We are going to start with configuring the Admin API scopes - go ahead and click on the button shown in the screenshot below.
Under the Admin API Access Scope section, use the search bar to find the sections below and enable “Read and Write” access.
Customers
Orders
Discounts
Pricing Rules
Under the Admin API Access Scope section, search for the follow sections and enable “Read” access.
Product
Once you are done, click the save button on the top right. The permissions should look like the following when you are done:
7. After the Admin API has been configured, go back to the Overview page and click on “Install App”
8. Once the App is installed, you will land on the API credentials page. Make sure you copy these API keys and provide them to your SocialLadder Implementation Manager.
The Admin API Access Token can only be revealed once, so make sure you copy and save it to a safe place
You will need to also copy the API Key and Secret Key
