Chat Loader Usage Examples

Using events and the public methods exposed by the chat loader it is easy to integrate it any site or webapp.

Basic example

This is the most basic example. We integrate the chat loader in a simple "Hello World" HTML page.

<!DOCTYPE html>
<title>HTML rockt!</title>
<p>Hello world</p>
<script
  src="https://static.guuru.com/loader/v1.0/chat.min.js">
</script>
<script>
  window.guuru = window.Guuru();
  window.guuru.init({
    appId: '<YOUR_APP_ID>',
    locale: 'en',
  });
</script>

Single page React webapp

This example shows how to integrate the chat loader with a single page application (SPA) built with react and react-router.

Below is an example <Chat /> component that exposes the chat loader as a react component.

Check the full code example on our repo.

import React from 'react';

class Chat extends React.Component {
  static initChatloader() {
    window.guuru = window.Guuru();
    window.guuru.init({
      appId: 'guuru-qa',
      locale: 'en',
    });
  }

  componentDidMount() {
    if ('Guuru' in window) {
      Chat.initChatloader();
      return;
    }
    document.addEventListener(
      'guuru:loaded',
      Chat.initChatloader,
      { once: true },
    );
  }

  componentWillUnmount() {
    document.removeEventListener(
      'guuru:loaded',
      Chat.initChatloader,
    );
    if ('guuru' in window) {
      window.guuru.destroy();
    }
  }

  render() {
    return null;
  }
}

export default Chat;

You can the use the Chat component to show or hide the chat loader conditionally as you would with any other react component.

React webapp using react-router

If you use react-router or a similar routing component you have two choices when using the component above:

  1. Include the <Chat /> component only on the routes you wish it to show;
  2. Include the <Chat /> component on every route you may need in the future, and use the Partner Portal Display Rules in Settings, Appearance to dynamically configure where the chat loader should show.

The second approach has the advantage of allowing you to show or hide the loader without having to change and deploy your code. However, as long as you are using a component like the one described above, either approach will work.

← ConversionGetting started →