Implementing LiveChat using Iframe

Simple implementation

Hoory Live Chat can be implemented on any website using the iframe code snippet. This is the easiest way to implement Hoory on your website.

For simple usecases where you don't need to keep user chat history, you can use the iframe code snippet. This is the easiest way to implement Hoory on your website.

<iframe src="https://app.hoory.com/widget?website_token=TOKEN&showUnreadBubble=0">
<p>Your browser does not support iframes.</p>
</iframe>

implementation with history

If you want to keep user chat history, you can use the iframe code snippet. This is the easiest way to implement Hoory on your website.

<script>
  /**
   * Set cookie value by name (you can use your own pkg for this)
   * @param cname
   * @param cvalue
   * @param exdays
   */
  function setCookie(cname, cvalue, exdays) {
    const d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    let expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }
  /**
   * A simple function to get cookie value by name (you can use your own pkg for this)
   * @param cname
   * @returns {string}
   */
  function getCookie(cname) {
    let name = cname + '=';
    let ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
      let c = ca[i];
      while (c.charAt(0) === ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) === 0) {
        return c.substring(name.length, c.length);
      }
    }
    return '';
  }

  /**
   * Listen to load message from iframe
   */
  const loadEventPrefix = 'hoory-widget:';
  function sendMessageToIframe(key, value) {
    document
      .getElementById('chat-iframe')
      .contentWindow.postMessage(
      `${loadEventPrefix}${JSON.stringify({ event: key, ...value })}`,
      '*'
    );
  }

  /**
   * Initialize the iframe
   */
  const token = 'YOUR_WEBSITE_TOKEN';
  const iframe = document.createElement('iframe');
  iframe.id = 'chat-iframe';
  iframe.setAttribute(
    'src',
    `https://app.hoory.com/widget?I justwebsite_token=${token}&cw_conversation=${getCookie(
      'cw_conversation'
    )}&showUnreadBubble=0`
  );
  iframe.style.width = '640px';
  iframe.style.height = '100vh';
  document.body.appendChild(iframe);

  window.addEventListener('message', (msg) => {
    if (msg?.data && msg?.data?.startsWith(loadEventPrefix)) {
      const data = JSON.parse(msg.data.replace(loadEventPrefix, ''));
      if (data.event === 'loaded') {
        const cw_token = data.config.authToken;
      
        setCookie('cw_conversation', cw_token, 365);
        sendMessageToIframe('config-set', {
          locale: 'en', // Language to be set https://docs.hoory.com/product/channels/live-chat/sdk/setup#possible-language-values
          darkMode: 'auto', // [light, auto]
        });
      }
    }
  });
</script>

This way you can keep the user chat history and also show the unread bubble on your website.

Not in a web environment?

If you want to embed Hoory in a different environment rather than a web environment, you can use a different storage mechanism to store the cw_token and pass it to the iframe URL. And instead of iframe, there are webview solutions almost everywhere, which you can use same idea to implement Hoory in your environment.