How to add Brand concierge in DSN website
A new Brand Concierge extension (Beta) is now available for the Data Collection Tag Property.
You can create brand concierge on your own sandbox
Click on Get Started and provide the concierge details
You can export your products from your dsn project products screen and create the products json file which can be used as the knowledge source for brand concierge
For example: https://dsn.adobe.com/projects/risharma-MPS4/products
Sample product json
NOTE: Make sure the product JSON follows the sample format above and that no values are left empty.
Create the website links CSV file with all the website pages links, make sure to create aliascreate alias in dsn website and add the alias links
Note: This is already completed in DSN. For your reference, when adding the website links CSV file to Brand Concierge, please ensure that robots.txt is updated with the configuration below. This allows the system to crawl the web pages.
User-agent: * Allow: /
Sample file:
Upload both the files in the knowlegde sources
After adding the knowledge source. Click Get Started on the Product advisory for consumers card.
After setting up the knowledge advisory, provide the brand expression
Once this setup is done you should see the uploads in the knowledge source as completed and connected to your instance brand concierge
Once above steps are completed
Go to your project and create a brand concierge screen and edit the page and add a divider compnent with custom class as brandConcierge
Go to your projects data collection
Create the datastream for brand concierge, select the schema and save
After this, go to the data collection property and add the Brand Concierge rule
Provide your brand concierge page in the condition configuration
Add the custom action
Open editor and add the below code and make sure to update the your datastream id and org ID under the CONFIG and update the conversation object value to your instance region like nld2 or va7
(function () {
"use strict";
const CONFIG = {
datastreamId: "46ec447b-fd7f-48d5-b63d-4cce1931a87b",
orgId: "BF9C27AA6464801C0A495FD0@AdobeOrg",
styleConfigScript:
"https://demo-system-next.s3.amazonaws.com/assets/luma/luma-style-configurations.js",
brandConciergeScript:
"https://experience.adobe.net/solutions/experience-platform-brand-concierge-web-agent/static-assets/main.js",
containerId: "brand-concierge-container",
iframeId: "brand-concierge-iframe",
};
console.log("here")
// Check if already initialized to prevent duplicates
const existingIframe = document.getElementById(CONFIG.iframeId);
if (existingIframe) {
console.log("Brand Concierge already loaded, skipping...");
return;
}
console.log("Brand Concierge - Simple Iframe Starting...");
function createIframe() {
let container = document.getElementById(CONFIG.containerId);
if (!container) {
container = document.createElement("div");
container.id = CONFIG.containerId;
container.style.cssText =
"width: 100%; min-height: 300px; padding: 10px;";
const divider = document.querySelector(".brandConcierge");
if (divider && divider.parentNode) {
divider.parentNode.insertBefore(container, divider.nextSibling);
} else {
document.body.appendChild(container);
}
}
const iframe = document.createElement("iframe");
iframe.id = CONFIG.iframeId;
iframe.style.cssText =
"width: 100%; height: 550px; border: none; background: transparent;";
iframe.sandbox =
"allow-scripts allow-same-origin allow-forms allow-popups allow-modals";
container.appendChild(iframe);
return iframe;
}
function setupIframeContent(iframeDoc) {
iframeDoc.write("<!DOCTYPE html>");
iframeDoc.write('<html><head><meta charset="UTF-8"><title>BC</title>');
iframeDoc.write("<style>");
iframeDoc.write("body { margin: 0; padding: 0; font-family: sans-serif; }");
iframeDoc.write(
"#brand-concierge-mount { padding: 0; min-height: 200px; }"
);
iframeDoc.write(
".chat-history { overflow-y: auto !important; min-height: auto !important; }"
);
iframeDoc.write("</style>");
iframeDoc.write("</head><body>");
iframeDoc.write('<div id="brand-concierge-mount"></div>');
iframeDoc.write("</body></html>");
iframeDoc.close();
const script = iframeDoc.createElement("script");
script.textContent = getInitScript();
iframeDoc.body.appendChild(script);
}
function getInitScript() {
return (
`(function() {
const CONFIG = {
datastreamId: '` +
CONFIG.datastreamId +
`',
orgId: '` +
CONFIG.orgId +
`',
styleScript: '` +
CONFIG.styleConfigScript +
`',
alloyScript: 'https://cdn1.adoberesources.net/alloy/2.35.0/alloy.min.js',
bcScript: '` +
CONFIG.brandConciergeScript +
`'
};
function log(msg, isErr) {
console.log(msg);
}
function loadScript(url, id) {
return new Promise((resolve, reject) => {
if (document.getElementById(id)) {
log('Already loaded: ' + url.split('/').pop());
resolve();
return;
}
const s = document.createElement('script');
s.src = url;
s.id = id;
s.onload = () => { log('Loaded: ' + url.split('/').pop()); resolve(); };
s.onerror = () => { log('Failed: ' + url, true); reject(new Error('Failed: ' + url)); };
document.head.appendChild(s);
});
}
async function init() {
try {
log('=== Brand Concierge Iframe (Simplified) ===');
// STEP 1: Initialize alloy namespace BEFORE loading script
log('Step 1: Initializing alloy namespace...');
!function (n, o) {
o.forEach(function (o) {
n[o] || ((n.__alloyNS = n.__alloyNS ||
[]).push(o), n[o] = function () {
var u = arguments; return new Promise(
function (i, l) { n[o].q.push([i, l, u]) })
}, n[o].q = [])
})
}
(window, ["alloy"]);
log('Alloy namespace initialized');
// STEP 2: Load Luma style configuration from S3
log('Step 2: Loading Luma style config from S3...');
try {
await loadScript(CONFIG.styleScript, 'style-cfg');
log('Luma style config loaded successfully');
if (window.styleConfiguration) {
log('Brand: ' + (window.styleConfiguration.metadata ? window.styleConfiguration.metadata.brandName : 'unknown'));
} else {
log('WARNING: styleConfiguration not found after loading', true);
window.styleConfiguration = {};
}
} catch (e) {
log('Style config failed: ' + e.message, true);
window.styleConfiguration = {};
}
// STEP 3: Load alloy.js
log('Step 3: Loading alloy.js...');
await loadScript(CONFIG.alloyScript, 'alloy-lib');
await loadScript(CONFIG.bcScript, 'bc-build')
log('Alloy.js loaded');
// STEP 4: Configure alloy
log('Step 4: Configuring alloy...');
await window.alloy("configure", {
defaultConsent: "in",
edgeDomain: "edge.adobedc.net",
edgeBasePath: "ee",
datastreamId: CONFIG.datastreamId,
orgId: CONFIG.orgId,
debugEnabled: true,
idMigrationEnabled: false,
thirdPartyCookiesEnabled: false,
prehidingStyle: ".personalization-container { opacity: 0 !important }",
conversation: {
region: "va7"
}
});
log('Alloy configured');
// STEP 6: Bootstrap Brand Concierge UI
log('Step 6: Bootstrapping Brand Concierge...');
await window.adobe.concierge.bootstrap({
instanceName: "alloy",
stylingConfigurations: window.styleConfiguration,
selector: "#brand-concierge-mount",
stickySession: false
});
log('Bootstrap completed');
// STEP 7: Wait and verify
await new Promise(r => setTimeout(r, 2000));
const mount = document.getElementById('brand-concierge-mount');
if (mount && (mount.children.length > 0 || mount.innerHTML !== 'Loading...')) {
log('SUCCESS! Brand Concierge UI rendered!');
} else {
log('Waiting for UI to appear...', true);
}
} catch (error) {
log('ERROR: ' + error.message, true);
console.error(error);
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();`
);
}
// Initialize immediately
console.log("Creating iframe...");
const iframe = createIframe();
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.open();
setupIframeContent(iframeDoc);
console.log("Iframe setup complete - Brand Concierge loaded!");
})();
You should see Brand Concierge on your website page
