Hiver

Website Installation

Load widget for authenticated users only

Trigger the widget programmatically

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/7d8c023b-bf31-432a-b128-3eed64ec1f38-69b3a93f10148008b5aae84f.png" alt="" style="
              width:1032px;
	            height:604px;
	            aspect-ratio:1032 / 604"
         /></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">Plain text</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 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">Plain text</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/1fd46671-5b1c-4ab3-b8b7-deb079f36299-69b3a93f10148008b5aae84f.png" alt="" style="
              width:1032px;
	            height:604px;
	            aspect-ratio:1032 / 604"
         /></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">Plain text</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">Plain text</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 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">Plain text</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.

Sections

Ask an AI

Code with AI