LoudCrowd Influencer List Page (ILP) runs on the concept of web-components, whereas your site can load and use functional components of LoudCrowd programs right in your own eCommerce platform.
Create a page within your Custom site and open it for html editing.
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 of those tag managers are being blocked by default, thus rendering the Influencer list 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.
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>
Where SHOP_ID is a LoudCrowd Identifier for the your site. Ask your LoudCrowd representative for your SHOP_ID.
The page's Content Security Policy will need to 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 component
Next, in the body tag, you will need to place each of the web-components you desire to be displayed. For example:
<influencer-list-block></influencer-list-block>
Small UI Customizations
The LoudCrowd app can control many of the standard customizations of the component. However, there will be some CSS customizations that need to be deployed on the actual page to ensure that it looks consistent with the rest of the site.
Elements like margins, padding, spacing, etc. all need to 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: https://intercom.help/loudcrowd-developer-docs/en/articles/9483650-styling-influencer-list-bl
Filtering Influencer List Block by Creator Segment
When setting up an Influencer List Page (ILP), filtering by segment is an option to feature a subset of creators.
How to apply a segment filter:
LoudCrowd > Integrations > Ecomm. In the Web Component Settings, click the segment selector dropdown
Select the segment you want to filter the block to
This will display only creators from that specific segment on the page, and order them based on revenue generated
Common reasons to use segment filtering:
Showcase top performers or VIP creators
Display creators for a specific campaign (e.g., “holiday” creators)
Feature creators from a particular region or program
Highlight creators with specific content types or performance metrics
If you don’t need filtering:
You can leave the segment selector empty to display all creators
The block will pull from your entire creator base
The segment you choose should align with the purpose of that specific page or block. For example, a holiday landing page might filter to a “Holiday Campaign” segment, while a general ambassador page might show all active creators.