Getting Started

Lorem markdownum Tyrios; illa dulci, superba. Anaphen temporis lassant, sonus qui eritque nota lenita, qui usus imperio cervum

Demo

Available at https://chat-widget.freeday.chat

portal-chat-demo

Install

pnpm add @freeday-ai/webchat-widget

npm install --save @freeday-ai/webchat-widget

Usage

First, sign up at https://freeday.me/register to get your account token. Your account token is what you will use to pass in as the token prop below.

Using in HTML

Paste the code below between your <head> and </head> tags:

<script>
  window.Freeday = {
    config: {
      // Pass in your Freeday account token here after signing up
      token: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx',
      title: 'Welcome to Freeday!',
      subtitle: 'Ask us anything in the chat window below 😊',
      // Optionally render inside a different theme
      theme: "freeday_v2",
      primaryColor: "#13c2c2",
      // Optionally pass in a default greeting
      greeting: 'Hi there! How can I help you?',
      // Optionally specify the base URL
      baseUrl: 'https://beta-webchat.freeday.chat',
    },
  };
</script>
<!-- Make sure to replace <version> with the actual version number. You can find the latest version at: https://www.npmjs.com/package/@freeday-ai/webchat-widget?activeTab=versions -->
<script
  type="text/javascript"
  async
  defer
  src="https://unpkg.com/@freeday-ai/webchat-widget@<version>/dist/freeday-webchat-widget.iife.js"
></script>

Using in React

Place the code below in any pages on which you would like to render the widget. If you'd like to render it in all pages by default, place it in the root component of your app.

import React from 'react';

import {ChatWidget} from '@freeday-ai/webchat-widget';

// You can also import the following
// import {ChatWidget, ChatWindow, Freeday} from '@freeday-ai/webchat-widget';
//
// The `ChatWindow` component allows you to embed the chat however you want,
// and the `Freeday` object provides access to functions that can programmatically
// open/close the chat widget, e.g.:
//
// `Freeday.open()` // => opens the chat widget
// `Freeday.close()` // => closes the chat widget
// `Freeday.toggle()` // => toggles (opens or closes) the chat widget

const ExamplePage = () => {
  return (
    <>
      {/*
        Put <ChatWidget /> at the bottom of whatever pages you would
        like to render the widget on, or in your root/router component
        if you would like it to render on every page
      */}
      <ChatWidget
        // Pass in your Freeday account token here after signing up
        token='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx'
        title='Welcome to Freeday!'
        subtitle='Ask us anything in the chat window below 😊'
        primaryColor='#13c2c2'
        theme='freeday_v2'
      />
    </>
  );
};

Options

These are the props you can pass into your <ChatWidget /> React component, or the fields you can specify in your Freeday.config:

| Left | Centre | Right | |:-----|:------:|------:| | 1 | 2 | 3 |

| Prop | Type | Value | Default | | :--------------------------------: | :----------------------------------: | :-------------------------------------------------------------------------------------------------------------------------: | :-------------------------------: | | token | string | Your Freeday account token | N/A | | title | string | The title in the header of your chat widget | Welcome! | | subtitle | string | The subtitle in the header of your chat widget | How can we help you? | | primaryColor | string | The theme color of your chat widget | 1890ff | | avatar | string | An optional An optional initial image url to be used as avatar | N/A | iframeUrlOverride | string | An override of the iframe URL we use to render the chat, if you have a custom intergration | | false | | isOpenByDefault | boolean | If you want the chat widget to open as soon as it loads | false | | persistOpenState | boolean | Persists the open state of the chat across pages | false | | hideToggleButton | boolean | Hides the toggle button in case you want to open/close programmatically | false | | | customIconUrl | string | A link to a custom icon image URL | N/A | | iconVariant | 'outlined' \| 'filled' | The style of the default icon | outlined | | position | 'right' \| 'left' | The position of the chat on the page | right | | styles | object | Inline style overrides for chatContainer, toggleContainer, and toggleButton | {} | | storageType | 'local' \| 'session' \| 'cookie' \| 'memory' \| 'none' | The storage type used by the user session | session | | onChatLoaded | ({open, close, identify}) => void | Callback fired when chat is loaded, returning some utility functions | N/A | | onChatOpened | () => void | Callback fired when chat is opened | N/A | | onChatClosed | () => void | Callback fired when chat is closed | N/A |

Development

To build the project, run pnpm build in the root directory. (If you're running it for the first time, you'll have to run pnpm install first.)

pnpm install
pnpm build

To test it out

pnpm install
pnpm dev

This will start a development server on http://localhost:3000 by default, and open up the example app in your browser.

Important notes

By default, the example widget points at development servers for the Freeday API (which runs at http://localhost:4000). These values are set with the iframeUrlOverride props respectively.

If you want to develop against your account in production, you can update these values to the following:

iframeUrlOverride: https://webchat.freeday.chat

(Note that you can also simply remove these props, since the values above are the defaults.)

You'll also want to update your account token to point to your own account. If you haven't already, create a free account at https://freeday.me/register to get started.

Once you have your account token, update the token prop to point at yours.