Button Usage Examples

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

Basic example

This is the most basic example. We integrate the chat button 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 button with a single page application (SPA) built with react and react-router.

Below is an example <Chat /> component that exposes the chat button 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 button 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 button should show.

The second approach has the advantage of allowing you to show or hide the button 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.

← CookiesGetting started →