Deploying Ai Agent Across Sub-Domains and Cross-Domains

  • Last updated on Jun 17, 2025
  • Published on Jun 17, 2025
  • 4 minute(s) read
Prev Next

Deploying Ai Agents across multiple web domains may require additional configuration depending on your setup.

There are three common deployment scenarios:

  • Same host: No configuration is needed if all chatbots are deployed on the same host. Follow the instructions on this article.

  • Different hosts, no sticky sessions: If sticky sessions aren’t required, no additional setup is necessary. Follow the instructions on this article.

  • Different hosts, sticky sessions enabled: To maintain sticky sessions across domains, you’ll need to pass the same deviceId across all hosts.

Lets dive into the details.

Who can use this

Dialpad Admins with an Ai Agent can deploy their chatbot across sub-domains and cross-domains.

Deploy Ai Agent on different hosts with sticky sessions

To deploy your Ai Agent on different hosts, with sticky sessions enabled, go to the Dialpad Admin Portal.

Note

In this example, you want to deploy a chatbot on the following two web pages: www.acme.com/products and www.customer-care.acme.com.

  1. Select Admin Settings

  2. Select Channels & IVR

  3. Select Digital channels

  4. Select the Ai Agent you want to deploy

  5. Select Deploy

  6. Select Copy code

  7. Paste the code snippet from Step #6 into the HTML source of www.acme.com/products and www.customer-care.acme.com

    <html>
  <head>
    <!-- Other meta tags and scripts for the page -->
  </head>
  <body>
    <!-- Other markup for the page -->
    <div
  id="dx_chatbot_fab_wrapper_id" 
  style="background-color:;border-radius:50%;box-sizing:border-box;display:flex;height:56px;overflow:hidden;padding:12px;width:56px;position:absolute;bottom:16px;right:16px;z-index:123;">
  <img 
    data-dxchannelid="717f1b6eb10e431883d1e8e7c3dd4174"
    data-dxprovemail="[email protected]"
    id="dx_chatbot_fab_id"
    src="https://us-east.dx.dialpad.comundefined"
    style="clip-path:circle(50%);object-fit:contain;height:auto;width:100%;"
  />
</div>
<script>window.dxe = { "server": "https://us-east.dx.dialpad.com" };</script>
<script async type="module" src="https://us-east.dx.dialpad.com/dxclient/dist/dialpad-chatbot.es.js"></script>
  </body>
</html>

  8. You can choose to pass different types of values forDEVICE_ID. Our recommendations are:

    1. Option 1: Passing the end user’s email, username, userid or similar types of unique IDs as the DEVICE_ID.

      1. This option may not be available for guest users.

    2. Option 2: Using off the shelf finger printing JavaScript libraries to generate and pass unique IDs to the chatbot. A finger printing JavaScript utility creates an unique ID using end user’s hardware information via browser APIs. The following code snippet can be used as a basic finger printing utility:

    function fingerprint() {
  const features = []
  features.push(
    {
      key: "available_resolution",
      value: [screen.availHeight, screen.availWidth],
    },
    { key: "cookie_enabled", value: navigator.cookieEnabled },
    { key: "do_not_track", value: navigator.doNotTrack },
    { key: "hardware_concurrency", value: navigator.hardwareConcurrency },
    { key: "indexed_db", value: !window.indexedDB },
    { key: "language", value: navigator.language },
    { key: "local_storage", value: !window.localStorage },
    { key: "navigator_oscpu", value: navigator.oscpu },
    { key: "navigator_platform", value: navigator.platform },
    { key: "open_database", value: !window.openDatabase },
    { key: "pixel_ratio", value: window.devicePixelRatio },
    { key: "resolution", value: [screen.width, screen.height] },
    { key: "session_storage", value: !window.sessionStorage },
    { key: "timezone_offset", value: new Date().getTimezoneOffset() },
    { key: "touch_support", value: navigator.maxTouchPoints },
    { key: "user_agent", value: navigator.userAgent },
  )
  for (let i = 0; i < navigator.plugins.length; i++) {
    features.push({
      key: `navigator_plugin_${i}`,
      value: navigator.plugins[i].name,
    })
  }
  let fingerprint = ""
  for (const feature of features) {
    if (feature.value) {
      fingerprint += feature.value.toString().toLowerCase().slice(0, 2)
    }
  }
  fingerprint += fingerprint.length
  fingerprint += navigator.plugins.length
  return fingerprint
}

Combining the code snippets from Step #7 and #8, our deployment source in www.acme.com/products and www.customer-care.acme.com would read as:

<html>
  <head>
    <!-- Other meta tags and scripts for the page -->
  <script>
    function fingerprint() {
      const features = [];
      features.push(
        {
          key: "available_resolution",
          value: [screen.availHeight, screen.availWidth],
        },
        { key: "cookie_enabled", value: navigator.cookieEnabled },
        { key: "do_not_track", value: navigator.doNotTrack },
        { key: "hardware_concurrency", value: navigator.hardwareConcurrency },
        { key: "indexed_db", value: !window.indexedDB },
        { key: "language", value: navigator.language },
        { key: "local_storage", value: !window.localStorage },
        { key: "navigator_oscpu", value: navigator.oscpu },
        { key: "navigator_platform", value: navigator.platform },
        { key: "open_database", value: !window.openDatabase },
        { key: "pixel_ratio", value: window.devicePixelRatio },
        { key: "resolution", value: [screen.width, screen.height] },
        { key: "session_storage", value: !window.sessionStorage },
        { key: "timezone_offset", value: new Date().getTimezoneOffset() },
        { key: "touch_support", value: navigator.maxTouchPoints },
        { key: "user_agent", value: navigator.userAgent },
      );
      for (let i = 0; i < navigator.plugins.length; i++) {
        features.push({
          key: `navigator_plugin_${i}`,
          value: navigator.plugins[i].name,
        });
      }
      let fingerprint = ""
      for (const feature of features) {
        if (feature.value) {
          fingerprint += feature.value.toString().toLowerCase().slice(0, 2);
        }
      }
      fingerprint += fingerprint.length;
      fingerprint += navigator.plugins.length;
      return fingerprint;
    }
  </script>
  </head>
  <body>
    <!-- Other markup for the page -->
    <div
  id="dx_chatbot_fab_wrapper_id" 
  style="background-color:;border-radius:50%;box-sizing:border-box;display:flex;height:56px;overflow:hidden;padding:12px;width:56px;position:absolute;bottom:16px;right:16px;z-index:123;">
  <img 
    data-dxchannelid="717f1b6eb10e431883d1e8e7c3dd4174"
    data-dxprovemail="[email protected]"
    id="dx_chatbot_fab_id"
    src="https://us-east.dx.dialpad.comundefined"
    style="clip-path:circle(50%);object-fit:contain;height:auto;width:100%;"
  />
</div>
    <script>
      const fabElement = document.getElementById("dx_chatbot_fab_id")
      if (fabElement) {
        fabElement.dataset.dxdeviceid = `${fingerprint()}`;
      }
      window.dxe = { "server": "https://lighthouse.dx.dialpad.com" };</script>
    <script async type="module" src="https://lighthouse.dx.dialpad.com/dxclient/dist/dialpad-chatbot.es.js"></script>
  </body>
</html>

Note

The value of data-dxdeviceid="DEVICE_ID" controls the persistence across sub-domains and cross-domains.

In this example, we are querying the image element of the chat button and dynamically setting a new data attribute.

Related articles