How can I separate my chatbox in sub-sections?

If you own a large business or a large website, you may want to split your support in sub-sections, where user chat messages get routed to different support teams (eg: Sales, Product, Repairs, Contact).

Before you read this, we remind you that Crisp has a Routing / Assigning feature that helps separate one support inbox into different departments, eg. sales, support. Read more about Routing here.

Crisp is built around the general concept of "websites", where member operators take incoming visitor chats. Nothing prevents you from adding multiple Crisp websites for the same domain (eg: multiple acme.com websites) to route chats to different support teams. That way, you'll have an even more distinct separation, compared to what the Routing feature offers.

The way you can do it is the following:

Create a Crisp website per support team, and invite support operators to each website
Grab the WEBSITE_ID chatbox code for each website
For each sub-section of your website (can be on the same domain, or different sub-domains), print the Crisp JavaScript code with the relevant WEBSITE_ID that matches the support team which should handle the support for current page. In the following code example, different chatboxes are dynamically injected, depending on the visited URL path:

<script type="text/javascript">
  const WEBSITE_IDS = {
    pricing: "SALES_WEBSITE_ID",
    solutions: "PRODUCT_WEBSITE_ID",
    issue: "REPAIRS_WEBSITE_ID",
    contact: "SUPPORT_WEBSITE_ID",
    default: "DEFAULT_WEBSITE_ID"
  };

  // Get current path
  var path = window.location.pathname;

  // Strip away "/"
  path = path.replace(/\//g, "");

  // Inject specific WEBSITE_ID or default one
  window.CRISP_WEBSITE_ID=(WEBSITE_IDS[path] || WEBSITE_IDS.default);

  window.$crisp=[];(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();
</script>

Visiting https://acme.com/pricing would show the Sales team chatbox (SALES_WEBSITE_ID), visiting https://acme.com/solutions would show the Product team chatbox (PRODUCT_WEBSITE_ID), and so on. Visiting any other page (e.g. https://acme.com/about) would show the default chatbox (DEFAULT_WEBSITE_ID).

Updated on: 13/06/2022