A component simplifies Goftino widget usage in your React application

Last update: Jan 3, 2022

@mohsen007/react-goftino

A component simplifies Goftino widget usage in your React application

NPM version

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

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

GitHub

https://github.com/moh3n007/react-goftino-snippet
You might also like...

React hooks for generating QRCode for your next React apps.

next-qrcode React hooks for generating QR code for your next React apps. 🎁 Features Render as Canvas & Image Support Numeric, Alphanumeric, Kanji and

May 6, 2022

🔍 Power of Browser DevTools inspectors right inside your React app

🔍 Power of Browser DevTools inspectors right inside your React app

react-inspector Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook. Install NPM: npm

May 14, 2022

🔍 Power of Browser DevTools inspectors right inside your React app

🔍 Power of Browser DevTools inspectors right inside your React app

react-inspector Power of Browser DevTools inspectors right inside your React app. Check out the interactive playground or storybook. Install NPM: npm

May 14, 2022

Spokestack: give your React Native app a voice interface!

Spokestack: give your React Native app a voice interface!

React Native plugin for adding voice using Spokestack. This includes speech recognition, wakeword, and natural language understanding, as well as synt

May 6, 2022

React 17's automatic JSX runtime for your entire bundle

vite-react-jsx React 17's automatic JSX runtime for your entire bundle Features Replaces React.createElement calls in your entire bundle (even for pre

Mar 26, 2022

Visually build pages and frontends, lightning-fast. Plug into your React codebase. Empower anyone to ship.

Visually build pages and frontends, lightning-fast. Plug into your React codebase. Empower anyone to ship.

Visually build pages and frontends, lightning-fast. Plug into your React codebase. Empower anyone to ship.

May 13, 2022

Sapling - A convenient way to traverse your React app in VS Code

Sapling - A convenient way to traverse your React app in VS Code

Sapling - A convenient way to traverse your React app in VS Code

May 11, 2022

React badges for your Profile and Projects.

React badges for your Profile and Projects.

react-simple-badges React badges for your Profile and Projects. Find a complete list of over 1400 badges in badges.md Install npm i react-simple-badge

Apr 1, 2022

Create a "make-your-own" color palette app using React framework

Create a

KM Version of React Colors Project Udemy React Bootcamp capstone project from In

Dec 16, 2021
A simple react component for adding a nice typewriter effect to your project.
A simple react component for adding a nice typewriter effect to your project.

React Simple Typewriter A simple react component for adding a nice typewriter effect to your project. Install npm npm i react-simple-typewriter Yarn y

Apr 24, 2022
INotebook is a React Application for managing personal notes on the cloud

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 3, 2022
React Native & D3 DemoGraph Application
React Native & D3 DemoGraph Application

React Native & D3 DemoGraph Application Demo expo link. Features The project demonstrate the usage of React with D3 liberty for React-Native. The base

Feb 14, 2022
React native starter kit for an e-commerce application developed by Amusoftech.
React native starter kit for an e-commerce application developed by Amusoftech.

React-Native-Ecommerce A starter boilerplate for a ecommerce mobile app using React Native and Redux. YouTube Subscribe Subscribe for more Instagram F

Apr 30, 2022
Interview Scheduler: a single-page application (SPA) that allows users to book
Interview Scheduler: a single-page application (SPA) that allows users to book

Interview Scheduler Description Interview Scheduler is a single-page application

Dec 30, 2021
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

May 18, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

May 16, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

May 14, 2022
Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries
  Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries

prom-react Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries Scope and purpose The main objective of th

Mar 23, 2022