---
title: How to add Brand concierge in DSN  website
slug: docs/how-to-add-brand-concierge-in-dsn-website
docTags: 
createdAt: 2026-01-22T09:20:56.604Z
---

:::hint{type="info"}
A new [Brand Concierge extension (Beta)](https://experienceleague.adobe.com/en/docs/experience-platform/tags/extensions/client/web-sdk/configure/brand-concierge) is now available for the Data Collection Tag Property.
:::



You can create brand concierge on your own sandbox

Go to [https://experience.adobe.com/](https://experience.adobe.com/)

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/qMZz-qFTVzksf7Xms9KY4-20260122-093129.png)

Click on Get Started and provide the concierge details

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/IEdP2UnL8oQYQ84fxXrgW-20260122-093343.png)

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](https://dsn.adobe.com/projects/risharma-MPS4/products)

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/mYbzWJ7rJNcXsaJv9P8dK-20260122-093622.png)

Sample product json

::File{src="https://api.archbee.com/api/presign/bAgVaanSi1tFmfc8PghaH/oP5bVhtrhSFWBAxuajY4S-20260122-093809.json" label="luma-products-final.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 alias](docId:608azE-FRcmW5LmG9skll) 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:

::File{src="https://api.archbee.com/api/presign/bAgVaanSi1tFmfc8PghaH/m0QA6h3LaCHU5oLJnxGz5-20260122-094026.csv" label="luma-website-links.csv"}

Upload both the files in the knowlegde sources

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/FznVKfc5x6jCVMPiJSFw9-20260122-094128.png)

After adding the knowledge source. Click Get Started on the Product advisory for consumers card.

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/nIaLCt8bRMMQnEhabSLuK-20260122-094327.png)

After setting up the knowledge advisory, provide the brand expression

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/VDdLE1ybS2fLzcLWYr-KD-20260122-094527.png)

Once this setup is done you should see the uploads in the knowledge source as completed and connected to your instance brand concierge

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/qe8HOHp2XmeJ_Z6IB_dCp-20260122-094656.png)

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**

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/MF_Bd8Y6cV14etepI85rR-20260122-095317.png)

Go to your projects data collection

Create the datastream for brand concierge, select the schema and save

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/Didgq1kldb8aUkSqo8Qzu-20260122-095053.png)

After this, go to the data collection property and add the Brand Concierge rule

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/tBb2sQHWHe4fIlkERP8dr-20260122-095704.png)

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/eekwOxyQWTFwwCKM86xL4-20260122-095722.png)

Provide your brand concierge page in the condition configuration

Add the custom action

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/qkLtn2T1wS43mc8csWshd-20260122-095842.png)

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

:::CodeblockTabs
```javascript
(function () {
  "use strict";

  const CONFIG = {
    datastreamId: "e8e4d719-f452-49b6-b3bc-119ffa82232c",
    orgId: "0E061E2D61F93F260A495FD6@AdobeOrg",
    styleConfigScript:
      "https://demo-system-next.s3.amazonaws.com/assets/luma/luma-style-configurations.js",
    brandConciergeScript:
      "https://experienceleague.adobe.com/docs/platform-learn/assets/brandconciergemain.js?lang=en",
    containerId: "brand-concierge-container",
    iframeId: "brand-concierge-iframe",
  };

  // 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://experienceleague.adobe.com/docs/platform-learn/assets/alloy.js?lang=en',
                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');
                    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 }"
                    });
                    log('Alloy configured');
                    
                    // STEP 5: Send event to fetch conversation
                    log('Step 5: Fetching conversation experience...');
                    const fetchResult = await window.alloy("sendEvent", {
                        conversation: {
                            fetchConversationalExperience: true,
                            surfaces: ["web://dsn.adobe.com/web/luma3/brand-concierge"]
                        },
                        data: {
                            configuration: {
                                edgeConfigId: CONFIG.datastreamId
                            }
                        }
                    });
                    log('Conversation fetched: ' + JSON.stringify(fetchResult).substring(0, 100));
                    
                    // STEP 6: Bootstrap Brand Concierge UI
                    log('Step 6: Bootstrapping Brand Concierge...');
                    await window.alloy("bootstrapConversationalExperience", {
                        selector: "#brand-concierge-mount",
                        src: CONFIG.bcScript,
                        stylingConfigurations: window.styleConfiguration || {},
                        stickySession: true
                    });
                    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!");
})();

```

```none
(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

![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/UWwSrswAbthlyh0rGhL6G-20260122-101443.png)