LoudCrowd storefronts run on 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 Salesforce 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.

Pre-requisite: LoudCrowd JS SDK Installation

Confirm you have installed LoudCrowd SDK on the base page template of your site. Detailed instructions are found here: https://docs.loudcrowd.com/docs/install-the-loudcrowd-sdk-on-your-ecommerce-site#/

Below is an overview of the installation.

🚧
IMPORTANT
Many e-commerce teams often want to include our JavaScript code on their pages 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 these tag managers are being blocked by default, making storefronts unusable for a substantial portion of buyers.
Loudcrowd’s JavaScript is used to load dynamic content into components, not for user tracking or profiling. Therefore, we recommend avoiding using tag managers to load Loudcrowd JavaScript.

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

Add LoudCrowd Web Components

Next, in the <body> tag, you will need to 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>

LoudCrowd currently supports three web components for Storefronts.

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 will 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 offers extensive control over the standard customizations of these components, including copy, the number of fields, and the data displayed. However, certain CSS customizations require deployment on the actual page to maintain consistency with the rest of the site.

Elements like margins, padding, spacing, etc., must be manipulated from that page's CSS. For more information, please refer to this documentation.