To use LoudCrowd functionality anywhere on your website, you must first install the LoudCrowd SDK.

The SDK is a light-weight javascript package that:

Renders app blocks (web components) with LoudCrowd and e-commerce data, including:
- Creator Storefronts
- Creator Lists (profiles that link to Storefronts)
attributes purchases to specific creators in your LoudCrowd program
exposes the Creator Widget to logged-in program members (toolbar on product detail pages)

Install LoudCrowd JS SDK

Step 1: Locate the base template page of your site

To ensure that LoudCrowd functions consistently and correctly across your e-commerce store, our app must be deployed on the base page template. You need to identify the base template used for rendering other pages, such as product list, product detail, collection, search result, cart, checkout and custom pages.

🚧
IMPORTANT
It is common for many e-commerce teams to want to add our javascript to the page using a tag manager like Google Tag Manager (GTM) or Adobe Launch (formerly DTM). However, due to the latest privacy and security settings in iOS 17+, most of those tag managers are being blocked by default, thus rendering the storefronts unusable for a significant percentage of buyers. LoudCrowd's javascript is used to load dynamic content in to the components, not perform user tracking or profiling. Therefore, our recommendation is to not use tag managers to load Loudcrowd javascript.

Step 2: Add the LoudCrowd Base Code Snippet to your base template page

In the <head> of the base page template, load and initialize the main LoudCrowd Base code snippet:

<script type="module" src="https://pub.loudcrowd.com/embed.js"></script>
<script>
function initLoudCrowd() {
  window.loudcrowd.init("SHOP_ID");
};
if (window.loudcrowd) {
  initLoudCrowd();
} else {
  document.addEventListener("loudcrowd-global-loaded", initLoudCrowd);
}
</script>

WhereSHOP_ID is a LoudCrowd Identifier for your site. Ask your LoudCrowd representative for your SHOP_ID.

The page's Content Security Policy must be updated to allow our UI to load.

📘
NOTE
For each rule, only add LoudCrowd if you already have a policy for that rule.

script-src *.loudcrowd.com
style-src *.loudcrowd.com
media-src *.loudcrowd.com lookaside.fbsbx.com
img-src *.loudcrowd.com lookaside.fbsbx.com
connect-src *.loudcrowd.com

Supporting locale

If the e-commerce site supports multiple languages on the same domain, you can tell us what language the user has selected via the same embed script.

📘
NOTE
This requires product feeds to have translations in them in order to change the language of product names, etc.

To switch the language on page load, add parameters to window.loudcrowd.init to specify language like so:

window.loudcrowd.init("SHOP_ID", { locale: "en-US" })
// or
window.loudcrowd.init("SHOP_ID", { locale: { language: "en", region: "US" } })

or after the page loads, and after calling window.loudcrowd.init by calling changeLocale:

window.loudcrowd.changeLocale("en-US")
window.loudcrowd.changeLocale({ language: "en": region: "US")

The locale can be any of the following:

Locale string supported by BCP-47 ex: en, en-US
An Intl.Locale object
An object like:
- language: ISO-639 alpha2 language string
- region(optional): ISO-3166 alph2 country/region
- { language: "en" } or { language: "en", region: "EU" }

That's it!

LoudCrowd has now been successfully installed in your e-commerce store. Now you can move on to these following steps:

Build Creator Storefront page using LoudCrowd app blocks
Enable the Creator Widget on your Product Detail Pages
Set up Purchase Attribution for your Creator Affiliates