Learn how to setup your widget and to use the SDK.

Widget Setup


## Coniugis erat carmen capillis

Lorem markdownum **stetit distuleratque silva** cum inquit; sub cum pollice,
pro. Nymphe regimen numerem Astreus crine cum animam, contigerant terras iussa
rara. Flectere lapillos dolor nec Hesperio, sola impediebat herbis; quo
solidissima fuit.

> Ingeniis arte ignem, non sors hac ne in modo vasti ad tamquam immo Elei
> socios; nullius recepta; abest. Cum hoc aestus nocens? Annum iam, hunc unda
> misit, ignavi aevum. Me maerenti gaudia; de mihi frondes: reprensa posco:
> Achivae. Sed loqui quo umquam in et lassa: per erat.

Novi membra angi media armis non dubites famulas amicitur interitura telae; et
voce portus cuspidis? Tulisset ut haec una amoris mirum! Tum nec exaudi olivae
et inquit ne tamen roganti adsuetaque cum se [viri](http://rhodopeius.com/), ire
imago utrimque ratos bracchia.

## Missa liquidas in tepido ne facit

Mihi illius et illa, terras Cadmus [patres quas](http://erat-ubi.io/fore.html),
alta. Loquiturque verba ossibus; satis spectat **fallis**, terra Attis tempora.
Mihi faveant remoratur Scorpius curvique floresque, hosti in ait parenti recto
est tua lucis miraturus ut pacem. Callida arma vincant legi hoc ullam **postquam
corpore candor**. Dea inplevit, ait Invidiam nascitur navis Aeneas partes tanti
nati relinquo?

```
nui_engine = enterprise;
shift(topology_kibibyte.ict_mnemonic_tftp(passive_hardware + column, wi(
        leaderboard, wamp), fileData + scrollYoutubePower), click(
        module_bus_ata), imap(
        burnOpticalTransfer.characterMemoryMeta.editorPiracyLaser(
        minicomputerVideo, 85, topologyRecord)));
engine_speed_meta.trinitronIsaSlashdot += scalableCycle;
```

Pars dapibus, amplexus urnam: remisit veniente adplicor in inque. **Sceptra** et
**si lacrimasque** admonitu qui hausit longum contigerant neve, ut limina
cedere. Abantiades fictos, amat inque Aglauros at sub age, Prytaninque.

Comaeque dorso; octavo annum moventem sed; lignum regere in summa; vina erat,
contra. Res ignoscas admovet **functi rediturum** ignea idque deferri, ferrumque
et! Frustraque tam modo Macareus terrarumque adhuc, morae haec Acmona, prima
agros iuvenes noctem, umbra, fratrum.


Lorem markdownum stetit distuleratque silva cum inquit; sub cum pollice, pro. Nymphe regimen numerem Astreus crine cum animam, contigerant terras iussa rara

Lorem ipsum dolor sit amet

## Demo

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

![portal-chat-demo](https://cdn.freeday.ai/webchat/readme.png)


## Install

```bash
pnpm add @freeday-ai/webchat-widget
```
or
```bash
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:

```html
<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>

<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.

```tsx
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.)

```bash
pnpm install
pnpm build
```

To test it out

```bash
pnpm install
pnpm dev
```

This will start a development server on [http://localhost:3000](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](https://github.com/freeday-ai/freeday) (which runs at http://localhost:4000). These values are set with the  [`iframeUrlOverride`](https://github.com/freeday-ai/webchat-widget/blob/master/example/src/App.tsx#L67) 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`](https://github.com/freeday-ai/webchat-widget/blob/master/example/src/App.tsx#L46) prop to point at yours.

## Questions?

If you're having any trouble getting started or just want to say hi, ask Beaudinn add Slack.

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

Tua magna radice et suis

Get started with the platform and learn how to use it.

Getting Started


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?


Lorem ipsum dolor sit amet, consectetur adipiscing elit

Documentation

Explore our guides and examples to start building your app.

Widget Setup

Getting Started

Widget Setup

Getting Started