Skip to main content

Using the Product Picker SDK on Custom Storefront Solutions

LoudCrowd's Product Picker SDK is used so that ambassadors with Storefronts are able to select and feature the items they actually use.

Al Nafea avatar
Written by Al Nafea
Updated over 2 years ago

Use LoudCrowd's Product Picker SDK

In order to provide the correct group of Storefront owners (ambassadors) with product picker functionality on their respective stores, the LoudCrowd web-components need to know if the ambassador is accessing their own page. To do this, we have provided a Product Picker SDK method in our main JavaScript snippet, where the hosting site can pass along if an ambassador is logged in or not. This script will also grab the lc_ambassador_id parameter from the URL of the page.

Requirements

  • A Store ID

  • Shared Secret.

    Ask your LoudCrowd representative to get these values for a customer storefront.

Add SDK

On the Storefronts page, In the <head> block, add the Product Picker SDK script tag:

<script type="text/javascript" src="https://pub.loudcrowd.com/embed.js"></script>

Initialize and Identify

On the page, if the customer is logged into the store. call SDK:

window.loudcrowd.init('STORE_ID', {
id: <your system's customer identifier>,
email: '[email protected]',
hmac: <the generated hmac signature (see below)>,
hmacTimestamp: <the time the hmac was generated in seconds since epoch>
})

The LoudCrowd system will check the email address against the known email of the ambassador, and given a match, will allow for the “Edit Products” features to be displayed.

Likewise, there is another status function which will detect the end of a session and prohibit the displaying of the product picker functionality.

window.loudcrowd.resetCustomer();

Generating an HMAC signature

The SDK requires an HMAC signature to verify the customer login data came from the storefront. This signature must be generated server-side and passed to the SDK via a script tag after render. The signature is a SHA256 hashed concatenated string of customer_email + customer_id + current_timestamp using the shared secret given by your LoudCrowd rep.

Python Example:

customer_str = email + customer_id + datetime.now().timestamp()   
hmac.new(
<secret string>.encode("utf-8"),
customer_str.encode("utf-8"),
digestmod=sha256,
).hexdigest()

Disclaimers

The Product Picker SDK is solely responsible for displaying the correct state of the product picker web component. The Product Picker SDK:

  • Will NOT access private passwords or customer information

  • Will NOT create new logins

  • Will NOT modify existing logins or customer information

  • Will NOT store private customer information

Did this answer your question?