LoudCrowd storefronts run on the concept of web-components, whereas your site can load and use functional components of LoudCrowd programs right in your e-commerce platform.

Create a page within your Custom site and open it for HTML editing.

📘
NOTE
LoudCrowd’s web components render based off of URL parameters, and therefore all the storefronts for your ambassadors only require one page within your system.

Install LoudCrowd JS SDK

Important Note about Tag Managers:

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 tag managers are blocked by default, thus rendering the storefronts unusable for many buyers. Loudcrowd's JavaScript loads dynamic content into the components, not performing user tracking or profiling. Therefore, we recommend not using tag managers to load Loudcrowd javascript.

Install

In the <head> of that page, 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

Add LoudCrowd Web Components

Next, in the body tag, you must place each web component you desire to be displayed. For example:

<ambassador-featured-product-block></ambassador-featured-product-block>
<ambassador-hero-block></ambassador-hero-block>
<ambassador-feed-block></ambassador-feed-block>

📘
NOTE
LoudCrowd currently supports three web components for Storefonts.

ambassador-hero-block: renders the header banner, including the social user’s profile picture, biography, follower count, etc.
ambassador-feed-block: renders the main content feed, including products and UGC posts.
ambassador-featured-product-block: when a product share link is loaded, this block renders the section highlighting that product above the rest of the page.

📘
NOTE
You'll need to work with dedicated client strategist on setting up your program. To test the blocks load correctly, load the page with a url parameter ?lc\_ambassador\_id=demo\_ambassador. this will load mock data into the blocks for testing.

Small UI Customizations

The LoudCrowd app can control many of the standard customizations of these components, such as copy, number of fields, what data is displayed, etc. However, some CSS customizations will need to be deployed on the actual page to ensure it looks consistent with the rest of the site.

Elements like margins, padding, spacing, etc., must be manipulated from that page's CSS. LoudCrowd will consult with your front-end developer to ensure that the designs match the page features and can send recommended code from our CSS library to ensure a high-quality implementation. Please refer to this doc for more details.