Hiver

Website Installation

Load widget for authenticated users only

Trigger the widget programmatically

Open the widget automatically after a delay

Open the widget from your own button

WebView installation

Embed the Hiver chat widget in a mobile app (WebView)

Chat Widget

Production

<p class="slate-p " >Use this script to load the chat widget only for logged-in users. You can add custom logic to detect logged-in users.</p><p class="slate-p " ></p><h2 class="slate-h2 " >Installation</h2><p class="slate-p " >Paste this script just before the &lt;/body&gt; tag on every page where the widget should appear.</p><h1 class="slate-h1 " ></h1><p class="slate-p " ><strong class="slate-bold">Before you begin</strong></p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Replace <code class="slate-code">YOUR_WEBSITE_TOKEN</code> with your <strong class="slate-bold">Website Token</strong> from <strong class="slate-bold">Admin Panel → Chat Inbox → Widget Script.</strong></div></li></ol><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/a96d10e8-e718-44cb-9343-69f117a58648.jpg" alt="" style="width:1104px;height:651px;aspect-ratio:1104 / 651" /></div></figure></div><p class="slate-p " >  2. Customize the <code class="slate-code">isUserLoggedIn()</code> function to detect signed-in users.</p><p class="slate-p " >  3. Update the values in <code class="slate-code">window.$hiverChatWidget.setUser()</code> with your authenticated user data.</p><p class="slate-p " >  4. Set  <code class="slate-code">widgetPosition</code> to <code class="slate-code">&quot;left&quot;</code> to display the widget on left side of the page.</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">Javascript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line">var widgetPosition = &quot;left&quot;;
</div></code></pre></div><p class="slate-p " ></p><p class="slate-p " ><span class="slate-color" style="background-color:transparent;color:rgb(0, 0, 0)"><strong class="slate-bold">Script:</strong></span></p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">HTML</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden">&lt;script&gt;
  (function(d, t) {
    var BASE_URL = &#39;&#39;;
    var CDN_URL = &#39;https://chat-widget.hiverhq.com/chat-widget&#39;;
    var WEBSITE_TOKEN = &#39;YOUR_WEBSITE_TOKEN&#39;;
    var widgetPosition = &quot;right&quot;;
    function isUserLoggedIn() {
      return true; // replace with real auth check
    }
    function loadWidget() {
      if (!isUserLoggedIn()) return;
      var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
      g.src = CDN_URL + &#39;/js/sdk.js&#39;;
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function() {
        window.hiverChatWidgetSettings = window.hiverChatWidgetSettings || {};
        window.hiverChatWidgetSettings.position = widgetPosition;
        window.chatwootSDK.run({
          websiteToken: WEBSITE_TOKEN,
          baseUrl: BASE_URL
        });
        if (window.$hiverChatWidget) {
          window.$hiverChatWidget.setUser(&#39;user0@example.com&#39;, {
            email: &#39;user0@example.com&#39;,
            name: &#39;John Doe 0&#39;,
            phone_number: &#39;+919876543210&#39;
          });
        }
      };
    }
    loadWidget();
  })(document, &#39;script&#39;);
&lt;/script&gt; </textarea><code class="language-html keep-markup drop-tokens">&lt;script&gt;
  (function(d, t) {
    var BASE_URL = &#39;&#39;;
    var CDN_URL = &#39;https://chat-widget.hiverhq.com/chat-widget&#39;;
    var WEBSITE_TOKEN = &#39;YOUR_WEBSITE_TOKEN&#39;;
    var widgetPosition = &quot;right&quot;;
    function isUserLoggedIn() {
      return true; // replace with real auth check
    }
    function loadWidget() {
      if (!isUserLoggedIn()) return;
      var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
      g.src = CDN_URL + &#39;/js/sdk.js&#39;;
      g.defer = true;
      g.async = true;
      s.parentNode.insertBefore(g, s);
      g.onload = function() {
        window.hiverChatWidgetSettings = window.hiverChatWidgetSettings || {};
        window.hiverChatWidgetSettings.position = widgetPosition;
        window.chatwootSDK.run({
          websiteToken: WEBSITE_TOKEN,
          baseUrl: BASE_URL
        });
        if (window.$hiverChatWidget) {
          window.$hiverChatWidget.setUser(&#39;user0@example.com&#39;, {
            email: &#39;user0@example.com&#39;,
            name: &#39;John Doe 0&#39;,
            phone_number: &#39;+919876543210&#39;
          });
        }
      };
    }
    loadWidget();
  })(document, &#39;script&#39;);
&lt;/script&gt;</code></pre></div><p class="slate-p " ></p><h2 class="slate-h2 " >Verifying the installation </h2><p class="slate-p " >Refresh the page to confirm if the widget appears.</p><p class="slate-p " ></p><h2 class="slate-h2 " >Next</h2><p class="slate-p " >If you want the widget to load in response to a specific user action, learn more about <a href="https://developer.hiverhq.com/chat-widget-installation/website/programmatic-triggers" target="_self">loading the widget on trigger</a>.</p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p><p class="slate-p " ></p>

Use this script to load the chat widget only for logged-in users. You can add custom logic to detect logged-in users.

Paste this script just before the </body> tag on every page where the widget should appear.

 to display the widget on left side of the page.

Refresh the page to confirm if the widget appears.

If you want the widget to load in response to a specific user action, learn more about 

Load widget for authenticated users only


<p class="slate-p " >By default, the widget loads automatically on page load. Use this script to load it in response to a button click.</p><p class="slate-p " ></p><h2 class="slate-h2 " >Installation</h2><p class="slate-p " >Use this script to load it in response to a button click. Paste this script just before the &lt;/body&gt; tag on every page where the widget should appear.</p><p class="slate-p " ></p><p class="slate-p " ><strong class="slate-bold">Before you begin</strong></p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Replace <code class="slate-code">YOUR_WEBSITE_TOKEN</code> with your <strong class="slate-bold">Website Token </strong>from <strong class="slate-bold">Admin Panel → Chat Inbox → Widget Script</strong>.</div></li></ol><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/ae0ea3dc-f106-40ad-8dcf-cf6615ddd3fa.jpg" alt="" style="width:1104px;height:651px;aspect-ratio:1104 / 651" /></div></figure></div><p class="slate-p " >   2. Replace <code class="slate-code">your-button-id</code> with the ID of your custom chat button.</p><p class="slate-p " >   3. Update your button element. This ensures the button is only active after the widget is ready and opens the chat when clicked.</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">HTML</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden">&lt;button id=&quot;your-button-id&quot; disabled onclick=&quot;window?.$hiverChatWidget?.toggle?.()&quot;&gt;
  Chat with us
&lt;/button&gt; </textarea><code class="language-html keep-markup drop-tokens">&lt;button id=&quot;your-button-id&quot; disabled onclick=&quot;window?.$hiverChatWidget?.toggle?.()&quot;&gt;
  Chat with us
&lt;/button&gt;</code></pre></div><p class="slate-p " >  4. Please update <code class="slate-code">widgetPosition</code> to <code class="slate-code">&quot;left&quot;</code> to configure widget on left side of the website.</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">Javascript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line">var widgetPosition = &quot;left&quot;;
</div></code></pre></div><p class="slate-p " ></p><p class="slate-p " ><span class="slate-color" style="background-color:transparent;color:rgb(0, 0, 0)"><strong class="slate-bold">Script:</strong></span></p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">HTML</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden">&lt;script&gt;
  window.addEventListener(&#39;hiver:widget-ready&#39;, function() {      
    // Enable custom chat button only after the widget is ready
    const btn = document.getElementById(&#39;your-button-id&#39;); 
    btn.disabled = false;
  });
  (function(d,t) {
    var BASE_URL = &quot;&quot;;
    var CDN_URL = &quot;https://chat-widget.hiverhq.com/chat-widget&quot;;
    var WEBSITE_TOKEN = &#39;YOUR_WEBSITE_TOKEN&#39;;
    var widgetPosition = &quot;right&quot;;
    var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
    g.src = CDN_URL + &quot;/js/sdk.js&quot;;
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload = function() {
      window.hiverChatWidgetSettings = window.hiverChatWidgetSettings || {};
      window.hiverChatWidgetSettings.position = widgetPosition;
      window.$hiverChatWidget.hideMessageBubble = true;
      window.chatwootSDK.run({
        websiteToken: WEBSITE_TOKEN,
        baseUrl: BASE_URL
      });
    }
  })(document,&quot;script&quot;);
&lt;/script&gt; </textarea><code class="language-html keep-markup drop-tokens">&lt;script&gt;
  window.addEventListener(&#39;hiver:widget-ready&#39;, function() {      
    // Enable custom chat button only after the widget is ready
    const btn = document.getElementById(&#39;your-button-id&#39;); 
    btn.disabled = false;
  });
  (function(d,t) {
    var BASE_URL = &quot;&quot;;
    var CDN_URL = &quot;https://chat-widget.hiverhq.com/chat-widget&quot;;
    var WEBSITE_TOKEN = &#39;YOUR_WEBSITE_TOKEN&#39;;
    var widgetPosition = &quot;right&quot;;
    var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
    g.src = CDN_URL + &quot;/js/sdk.js&quot;;
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload = function() {
      window.hiverChatWidgetSettings = window.hiverChatWidgetSettings || {};
      window.hiverChatWidgetSettings.position = widgetPosition;
      window.$hiverChatWidget.hideMessageBubble = true;
      window.chatwootSDK.run({
        websiteToken: WEBSITE_TOKEN,
        baseUrl: BASE_URL
      });
    }
  })(document,&quot;script&quot;);
&lt;/script&gt;</code></pre></div><p class="slate-p " ></p><h2 class="slate-h2 " >Verifying the installation</h2><p class="slate-p " >Refresh the page and click your custom button to confirm the widget appears.</p><p class="slate-p " ></p><p class="slate-p " ></p>

By default, the widget loads automatically on page load. Use this script to load it in response to a button click.

Use this script to load it in response to a button click. Paste this script just before the </body> tag on every page where the widget should appear.

   3. Update your button element. This ensures the button is only active after the widget is ready and opens the chat when clicked.

 to configure widget on left side of the website.

Refresh the page and click your custom button to confirm the widget appears.

<p class="slate-p " >By default, the widget stays closed until the visitor clicks the launcher. Use this script to open the chat window on its own, a few seconds after the visitor lands on the page.</p><h2 class="slate-h2 " >Installation</h2><p class="slate-p " >Paste this script just before the &lt;/body&gt; tag on every page where the widget should appear.</p><p class="slate-p " ><strong class="slate-bold">Before you begin</strong></p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Replace YOUR_WEBSITE_TOKEN with your Website Token from Admin Panel → Chat Inbox → Widget Script.</div></li></ol><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/ae0ea3dc-f106-40ad-8dcf-cf6615ddd3fa.jpg" alt="" style="width:1104px;height:651px;aspect-ratio:1104 / 651" /></div></figure></div><p class="slate-p " >2. Set openAfterSeconds to the number of seconds to wait before the chat window opens.</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line">var openAfterSeconds = 5;
</div></code></pre></div><p class="slate-p " >3. Please update widgetPosition to “left” to configure widget on left side of the website.</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line">var widgetPosition = &quot;left&quot;;
</div></code></pre></div><p class="slate-p " >Script:</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">HTML</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden">&lt;script&gt;
var openAfterSeconds = 5;
var landedAt = Date.now();
window.addEventListener(&#39;hiver:widget-ready&#39;, function() {
  setTimeout(function() {
    if (!window.$hiverChatWidget.isOpen) window.$hiverChatWidget.toggle();
  }, Math.max(0, openAfterSeconds * 1000 - (Date.now() - landedAt)));
});
(function(d,t) {
  var BASE_URL = &quot;&quot;;
  var CDN_URL = &quot;https://chat-widget.hiverhq.com/chat-widget&quot;;
  var WEBSITE_TOKEN = &#39;YOUR_WEBSITE_TOKEN&#39;;
  var widgetPosition = &quot;right&quot;;
  var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
  g.src = CDN_URL + &quot;/js/sdk.js&quot;;
  g.defer = true;
  g.async = true;
  s.parentNode.insertBefore(g,s);
  g.onload = function() {
    window.hiverChatWidgetSettings = window.hiverChatWidgetSettings || {};
    window.hiverChatWidgetSettings.position = widgetPosition;
    window.hiverChatWidgetSettings.disableCampaigns = true;
    window.chatwootSDK.run({ websiteToken: WEBSITE_TOKEN, baseUrl: BASE_URL });
  }
})(document,&quot;script&quot;);
&lt;/script&gt; </textarea><code class="language-html keep-markup drop-tokens">&lt;script&gt;
var openAfterSeconds = 5;
var landedAt = Date.now();
window.addEventListener(&#39;hiver:widget-ready&#39;, function() {
  setTimeout(function() {
    if (!window.$hiverChatWidget.isOpen) window.$hiverChatWidget.toggle();
  }, Math.max(0, openAfterSeconds * 1000 - (Date.now() - landedAt)));
});
(function(d,t) {
  var BASE_URL = &quot;&quot;;
  var CDN_URL = &quot;https://chat-widget.hiverhq.com/chat-widget&quot;;
  var WEBSITE_TOKEN = &#39;YOUR_WEBSITE_TOKEN&#39;;
  var widgetPosition = &quot;right&quot;;
  var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
  g.src = CDN_URL + &quot;/js/sdk.js&quot;;
  g.defer = true;
  g.async = true;
  s.parentNode.insertBefore(g,s);
  g.onload = function() {
    window.hiverChatWidgetSettings = window.hiverChatWidgetSettings || {};
    window.hiverChatWidgetSettings.position = widgetPosition;
    window.hiverChatWidgetSettings.disableCampaigns = true;
    window.chatwootSDK.run({ websiteToken: WEBSITE_TOKEN, baseUrl: BASE_URL });
  }
})(document,&quot;script&quot;);
&lt;/script&gt;</code></pre></div><p class="slate-p " ></p><p class="slate-p " ></p><h2 class="slate-h2 " >Verifying the installation</h2><p class="slate-p " >Refresh the page and wait for the number of seconds you configured. The chat window should open on its own.</p><h2 class="slate-h2 " >Next</h2><p class="slate-p " >If you want the widget to open in response to a button click instead of a delay, learn more about triggering the widget programmatically.</p><p class="slate-p " ></p><p class="slate-p " ></p>

By default, the widget stays closed until the visitor clicks the launcher. Use this script to open the chat window on its own, a few seconds after the visitor lands on the page.

2. Set openAfterSeconds to the number of seconds to wait before the chat window opens.

3. Please update widgetPosition to “left” to configure widget on left side of the website.

Refresh the page and wait for the number of seconds you configured. The chat window should open on its own.

If you want the widget to open in response to a button click instead of a delay, learn more about triggering the widget programmatically.

<p class="slate-p " >By default the widget shows its own chat bubble. Use this script when you want your own button to open the chat instead. The chat also opens on its own after a few seconds, so visitors who do not notice the button still get it.</p><p class="slate-p " ></p><h2 class="slate-h2 " >Installation</h2><p class="slate-p " >Paste this script just before the &lt;/body&gt; tag on every page where the widget should appear.</p><p class="slate-p " ><strong class="slate-bold">Before you begin</strong></p><ol class="slate-ol " ><li class="slate-li " ><div style="position:relative">Replace <code class="slate-code">YOUR_WEBSITE_TOKEN</code> with your <strong class="slate-bold">Website Token</strong> from <strong class="slate-bold">Admin Panel</strong> <strong class="slate-bold">→</strong> <strong class="slate-bold">Chat Inbox</strong> <strong class="slate-bold">→</strong> <strong class="slate-bold">Widget Script</strong>.</div></li></ol><div style="text-align:left"><figure ><div style="display:inline-block"><img src="https://d24lr4zqs1tgqh.cloudfront.net/2148dea3-e5b2-4709-9405-bec64e378967.jpg" alt="" style="width:1104px;height:626px;aspect-ratio:1104 / 626" /></div></figure></div><p class="slate-p " >2. Replace your-button-id with the ID of your custom chat button. The same button opens the chat and closes it again.</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">HTML</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden">&lt;button id=&quot;your-button-id&quot; onclick=&quot;openHiverChat()&quot;&gt;Chat with us&lt;/button&gt; </textarea><code class="language-html keep-markup drop-tokens">&lt;button id=&quot;your-button-id&quot; onclick=&quot;openHiverChat()&quot;&gt;Chat with us&lt;/button&gt;</code></pre></div><p class="slate-p " ></p><p class="slate-p " > 3. Adjust these values at the top of the script.</p><p class="slate-p " ></p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line">var openAfterSeconds   = 5;
var widgetPosition     = &quot;right&quot;;
</div><div class="slate-code_line">
</div><div class="slate-code_line">
</div><div class="slate-code_line">
</div><div class="slate-code_line">
</div><div class="slate-code_line">
</div><div class="slate-code_line">
</div></code></pre></div><ul class="slate-ul " ><li class="slate-li " ><div style="position:relative"><code class="slate-code">openAfterSeconds</code> — how long to wait before the chat opens on its own.</div></li><li class="slate-li " ><div style="position:relative"><code class="slate-code">widgetPosition</code> — set to &quot;left&quot; to place the widget on the left side.</div></li></ul><p class="slate-p " ></p><p class="slate-p " ></p><h3 class="slate-h3 " >Script</h3><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">HTML</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden">&lt;script&gt;
var openAfterSeconds = 5;
var widgetPosition   = &quot;right&quot;;

var landedAt = Date.now();

function openHiverChat() {
  if (window.$hiverChatWidget) window.$hiverChatWidget.toggle();
}

window.addEventListener(&#39;hiver:widget-ready&#39;, function() {
  setTimeout(function() {
    if (!window.$hiverChatWidget.isOpen) window.$hiverChatWidget.toggle();
  }, Math.max(0, openAfterSeconds * 1000 - (Date.now() - landedAt)));
});

(function(d,t) {
  var BASE_URL = &quot;&quot;;
  var CDN_URL = &quot;https://chat-widget.hiverhq.com/chat-widget&quot;;
  var WEBSITE_TOKEN = &#39;YOUR_WEBSITE_TOKEN&#39;;
  var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
  g.src = CDN_URL + &quot;/js/sdk.js&quot;;
  g.defer = true;
  g.async = true;
  s.parentNode.insertBefore(g,s);
  g.onload = function() {
    window.hiverChatWidgetSettings = window.hiverChatWidgetSettings || {};
    window.hiverChatWidgetSettings.position = widgetPosition;
    window.hiverChatWidgetSettings.disableCampaigns = true;
    window.hiverChatWidgetSettings.hideMessageBubble = true;
    window.chatwootSDK.run({ websiteToken: WEBSITE_TOKEN, baseUrl: BASE_URL });
  }
})(document,&quot;script&quot;);
&lt;/script&gt; </textarea><code class="language-html keep-markup drop-tokens">&lt;script&gt;
var openAfterSeconds = 5;
var widgetPosition   = &quot;right&quot;;

var landedAt = Date.now();

function openHiverChat() {
  if (window.$hiverChatWidget) window.$hiverChatWidget.toggle();
}

window.addEventListener(&#39;hiver:widget-ready&#39;, function() {
  setTimeout(function() {
    if (!window.$hiverChatWidget.isOpen) window.$hiverChatWidget.toggle();
  }, Math.max(0, openAfterSeconds * 1000 - (Date.now() - landedAt)));
});

(function(d,t) {
  var BASE_URL = &quot;&quot;;
  var CDN_URL = &quot;https://chat-widget.hiverhq.com/chat-widget&quot;;
  var WEBSITE_TOKEN = &#39;YOUR_WEBSITE_TOKEN&#39;;
  var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
  g.src = CDN_URL + &quot;/js/sdk.js&quot;;
  g.defer = true;
  g.async = true;
  s.parentNode.insertBefore(g,s);
  g.onload = function() {
    window.hiverChatWidgetSettings = window.hiverChatWidgetSettings || {};
    window.hiverChatWidgetSettings.position = widgetPosition;
    window.hiverChatWidgetSettings.disableCampaigns = true;
    window.hiverChatWidgetSettings.hideMessageBubble = true;
    window.chatwootSDK.run({ websiteToken: WEBSITE_TOKEN, baseUrl: BASE_URL });
  }
})(document,&quot;script&quot;);
&lt;/script&gt;</code></pre></div><p class="slate-p " ></p><h2 class="slate-h2 " >Verifying the installation</h2><p class="slate-p " >Refresh the page and click your button — the chat window should open. Click the button again to close it.</p><p class="slate-p " >Refresh once more and wait without clicking. After the number of seconds you configured, the chat window should open on its own, in the same place.</p><h2 class="slate-h2 " >Optional</h2><p class="slate-p " ><strong class="slate-bold">Adjust the widget position</strong> -  If the chat window does not sit well alongside your button, adjust the widget margin to suit your website.</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line">window.hiverChatWidgetSettings.widgetMargin = { bottom: 20 };
</div></code></pre></div><p class="slate-p " ><strong class="slate-bold">Show a close state on your button</strong> - The widget fires an event whenever the chat opens or closes. Use it to restyle your button.</p><div class="code-block-wrapper"  style="width:100%;min-width:100%" ><div class="code-block-header">JavaScript</div><pre class="slate-CodeBlockElement slate-code_block"><textarea id="publishedPageCodeblock" style="display:none !important; visibility: hidden; opacity: 0; width: 1px; height: 1px;" type="hidden"> </textarea><code class="language-javascript keep-markup drop-tokens"><div class="slate-code_line">window.addEventListener(&apos;hiver:chat-widget-toggle&apos;, function(e) {
  var btn = document.getElementById(&apos;your-button-id&apos;);
  if (btn) btn.classList.toggle(&apos;chat-open&apos;, e.detail.isOpen);
});
</div></code></pre></div><div class="slate-hr"><hr contenteditable="false" class="slate-HrElement-hr"/></div><p class="slate-p " ></p>

By default the widget shows its own chat bubble. Use this script when you want your own button to open the chat instead. The chat also opens on its own after a few seconds, so visitors who do not notice the button still get it.

2. Replace your-button-id with the ID of your custom chat button. The same button opens the chat and closes it again.

 3. Adjust these values at the top of the script.

Refresh the page and click your button — the chat window should open. Click the button again to close it.

Refresh once more and wait without clicking. After the number of seconds you configured, the chat window should open on its own, in the same place.

  If the chat window does not sit well alongside your button, adjust the widget margin to suit your website.

 The widget fires an event whenever the chat opens or closes. Use it to restyle your button.

<p class="slate-p " >Retrieve customizable installation scripts to seamlessly embed the Chat Widget on your mobile app. This section enables you to tailor the integration code to match your app requirements and desired functionality.</p><p class="slate-p " ></p><p class="slate-p " ></p>

Retrieve customizable installation scripts to seamlessly embed the Chat Widget on your mobile app. This section enables you to tailor the integration code to match your app requirements and desired functionality.

Sections

Appearance