<p>about your learning experience to help us improve.</p>

You've completed

cleanFiles/bookmap_SAP_Customer_Data_Cloud_Essentials_en-US_learning-sap-com_lsc-prod.zip (MMCP-DROPZONE) - 2025-01-21T14:26:37.000Z

Implementing a Screen Set using Web SDK

<div id="content"><p tabindex="0">The Web SDK is a JavaScript library that runs on the customer’s browser and makes calls to SAP Customer Data Cloud to identify and capture consent records from customers. The Web SDK interacts with the SAP Customer Data Cloud via a REST API layer, providing full CIAM and ECPM capabilities for your site.</p><img style="max-width:900px;max-height:none" class="image 1_1_landscape" title="Four square shapes. The first shape is purple with the text, Client Application or Web Page, the second shape is green with the text SAP Customer Data Cloud Web SDK, the third shape is blue with the text API Layer and the last shape is gray with the text SAP Customer Data Cloud Server. It illustrates the connection between the client application and the SAP Customer Data Cloud Web SDK, API layer, and SAP Customer Data Cloud server, by illustrating the, show UI, UI events, API method, and method response interactions" alt="Four square shapes. The first shape is purple with the text, Client Application or Web Page, the second shape is green with the text SAP Customer Data Cloud Web SDK, the third shape is blue with the text API Layer and the last shape is gray with the text SAP Customer Data Cloud Server. It illustrates the connection between the client application and the SAP Customer Data Cloud Web SDK, API layer, and SAP Customer Data Cloud server, by illustrating the, show UI, UI events, API method, and method response interactions" src="/service/media/C4H660_2406_en-US_media/C4H660_2406_en-US_images/Unit 3_Lesson 2_v2.png" tabindex="0"></div>

Web SDK

<div id="content"><p tabindex="0">Learn how to link your website to your SAP Customer Data Cloud site and create a login web screen set using the WebSDK JavaScript library.</p><div class="kalturaVideoLessonWrapper"><div aria-label="" class="kalturaVideoLessonContainer" data-testid="video" id="1_gijuvat6"></div></div></div>

Web SDK Video Demonstration

Exploring SAP Customer Data Cloud Essentials

Learn how to link your website to your SAP Customer Data Cloud site and create a login web screen set using the WebSDK JavaScript library. Follow step-by-step instructions and test your code on an HTTP server.<br><br># This description was auto-generated #

Implementing a Screen-Set Using the Web SDK in SAP Customer Data Cloud

After you login to the Console, look for the site API Key on the right side of your site. That key will be used to link your web site to your SAP Customer Data Cloud site, so the system will know which database needs to be used when performing CIAM calls. If you click on the API Key it will be copied to the clipboard which we’ll save for later. Next, open a text editor and paste the following content. As you can see, this is a very minimal HTML page. Save this file as index.html in a local folder for later. The next step is to include the Web SDK JavaScript library to the page. Right before the end of the head tag, add the following line. Please make sure that the entire code fits on a single line with no breaks. The script tag will include the JavaScript code that contains the Web SDK provided by SAP Customer Data Cloud. We’ll now replace the question marks with the site API Key copied earlier to your clipboard. Next, let’s create a link on your page that when clicked, will show the Login Web Screen-set flow. Let’s start with the link. Copy the following content and paste it inside your body tag. Again, we need to replace the question marks by the actual Web SDK API call that shows the screen-set. For that we’ll use the gigya.accounts.showScreenSet API. You can see that the gigya.accounts.showScreenSet call passes the ID of a Screen-set as an argument, which you will find in the console by going to the UI Builder in your site located on the left-hand menu. You’ll find Default-RegistrationLogin as the ID of one of your available Screen-Sets. If you followed along with the demo, your HTML file contents will look like this. The only difference between the HTML content presented in the demo and the one you are creating is the API Key value. You can save the file. Now that our coding part is done, let’s run it on an HTTP server to test our code. If you already have an HTTP server or want to host your HTML page on a public server you can skip this part and just watch along. The server we’ll be using in this demo is called Web Server for Chrome. After landing on the app page, click on Add to Chrome. Accept the dialog by clicking on Add app. Accept the dialog by clicking on Add app. It will be named as Web Server. Click on the icon. We now need to choose a folder from where it will serve content. Select the folder where you saved the index.html file. Go back to your browser and type-in http://localhost:8887. Then you’ll be presented with the simple HTML we created earlier. Now it’s time for testing. Go ahead and click on the Login link. The page now shows the Login Screen from the default registration and login Screen-set. Login using an existing account, such as the same account created in our full registration demo. After the customer has successfully logged in, the screen will be dismissed.