@mohsen007/react-goftino

A component simplifies Goftino widget usage in your React application

Introduction

This component applies to Goftino Web Widget including contact form, live chat, talk, answer bot and help center. For more information on widget and API, please check Goftino official documentation

Installation

with npm

npm i @mohsen007/react-goftino

with yarn

yarn add @mohsen007/react-goftino

Events

onReady

This event will run if the chat widget is ready to use.

onSendMessage

If any message is sent by the user, this event will be executed and you will have access to the type and content of the sent message.

onGetMessage

If you receive a new message from the operators, this event will run and you will have access to the type and content of the received message.

onOpen

This event will be run if the chat widget opens.

onClose

This event will be run if the chat widget closes.

Functions

setUser

Using this function, you can send the user information logged in to your website to Goftino to be displayed in the user profile for each conversation and access them.

getUser

By sending this request to Goftino, you can receive user information and save and use it on your site if needed.

setWidget

By sending this request to Goftino, you can change the appearance of the conversation widget.

Note: if you want to hide the widget icon, you need to use the open and close or toggle functions.

getUserId

If you need to integrate a user's conversations even with different browsers or devices, first use this function to get the unique user id (id) in Gotino and save it in your site database, then with the help of the function setUserId You can call and apply it when needed.

A unique user ID is a 64-letter expression.

setUserId

In general, Goftino creates a separate identifier for the user in each browser or device, and performs user authentication based on the browser in which the dialog is displayed. If you have a unique user ID in Goftino and apply this function, your contact can continue their previous conversation with you in any browser or device and prevent a new conversation from being created for that person.

Note: after applying the user ID, if you have the previous ID, the new ID will replace it.

unsetUserId

If this function is implemented, the current user ID will be removed from the browser and the message history in the conversation will not be displayed in the widget and the page will be reloaded.

Note: if the user sends a new message, a new ID will be created for the user.

sendMessage

Using this function, you can send the desired message to the user in your desired conditions. This message is for the user only and will not be used in conversations.

open

You can use this function to open the chat form.

close

You can use this function to close the chat form.

toggle

Using this function, the chat form will open if closed and open if closed.

Note: all above functions are a subset of Goftino function and must be used in the onReady event.

onReady=() => {
    // Goftino.setUser(...);
    // Goftino.getUser(...);
    // Goftino.setWidget(...);
    // Goftino.getUserId(...);
    // Goftino.setUserId(...);
    // Goftino.sendMessage(...);
    // Goftino.open();
    // Goftino.close();
    // Goftino.toggle();
}}

Component Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { GoftinoSnippet } from '@mohsen007/react-goftino';
const GOFTINO_KEY = 'your goftino embed key';

const App = () => {
  return (
    <GoftinoSnippet
      goftinoKey={GOFTINO_KEY}
      onReady={() => {
        window.Goftino.open();
      }}
    />
  );
};

ReactDOM.render(<App />, document.getElementById('#app'));

Examples

Your Own Widget

import React from 'react';
import ReactDOM from 'react-dom';
import { GoftinoSnippet } from '@mohsen007/react-goftino';
const GOFTINO_KEY = 'your goftino embed key';

const App = () => {
  const [hideButton, setHideButton] = React.useState(false);

  return (
    <GoftinoSnippet
      goftinoKey={GOFTINO_KEY}
      onReady={() => {
        window.Goftino.setWidget({
            hasIcon: false,
          });
      }}
      onClose={() => {
          setHideButton(false);
        }}
    />
    <button
        onClick={() => {
          window.Goftino.open();
          setHideButton(true);
        }}
        style={{
          opacity: hideButton ? 0 : 1,
          visibility: hideButton ? 'hidden' : 'visible',
          transition: 'all 0.15s linear',
          color: 'white',
          backgroundColor: 'red',
          border: '1px solid yellow',
          borderRadius: 8,
          padding: 8,
          cursor: 'pointer',
        }}
      >
        My Custom Widget
      </button>
  );
};

ReactDOM.render(<App />, document.getElementById('#app'));

to see full example code Click Here

License

MIT