Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@freeday-ai/chat-widget
Advanced tools
Freeday chat widget
Available at https://chat-widget.freeday.chat
npm install --save @freeday-ai/chat-widget
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.
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 😊',
newMessagePlaceholder: 'Start typing...',
primaryColor: '#13c2c2',
// Optionally pass in a default greeting
greeting: 'Hi there! How can I help you?',
// Optionally pass in metadata to identify the customer
customer: {
name: 'Test User',
email: 'test@test.com',
external_id: '123',
metadata: {version: 1, plan: 'premium'}, // Custom fields go here
},
// Optionally specify the base URL
baseUrl: 'https://freeday.me',
},
};
</script>
<script
type="text/javascript"
async
defer
src="https://chat-widget.freeday.chat/widget.js"
></script>
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/chat-widget';
// You can also import the following
// import {ChatWidget, ChatWindow, Freeday} from '@freeday-ai/chat-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 😊'
newMessagePlaceholder='Start typing...'
primaryColor='#13c2c2'
// Optionally pass in a default greeting
greeting='Hi there! How can I help you?'
// Optionally pass in metadata to identify the customer
customer={{
name: 'Test User',
email: 'test@test.com',
external_id: '123',
metadata: {version: 1}, // Custom fields go here
}}
// Optionally specify the base URL
baseUrl='https://freeday.me'
/>
</>
);
};
These are the props you can pass into your <ChatWidget />
React component, or the fields you can specify in your Freeday.config
:
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? |
newMessagePlaceholder | string | The placeholder text in the new message input | Enter your email |
newMessagesNotificationText | string | The notification text when new messages arrive and the chat window is closed | View new messages |
primaryColor | string | The theme color of your chat widget | 1890ff |
greeting | string | An optional initial message to greet your customers with | N/A |
avatar | string | An optional An optional initial image url to be used as avatar | N/A |
customer | object | Identifying information for the customer, including name , email , external_id , and metadata (for any custom fields) | N/A |
iframeUrlOverride | string | An override of the iframe URL we use to render the chat, if you have a custom intergration | |
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 |
popUpInitialMessage | boolean | number | Pops up the initial greeting after number milliseconds (or immediately if true ) | 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 | {} |
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 |
onMessageSent | (message: Message) => void | Callback fired when message is sent | N/A |
onMessageReceived | (message: Message) => void | Callback fired when message is received | N/A |
To build the project, run npm start
in the root directory. (If you're running it for the first time, you'll have to run npm install
first.)
npm install
npm start
To test it out, use the /example
directory:
cd example
npm install
npm start
This will start a development server on http://localhost:3000 by default, and open up the example app in your browser.
By default, the example widget points at development servers for the Freeday API (which runs at http://localhost:4000) and the Freeday chat window (which runs at http://localhost:8080). These values are set with the baseUrl
and iframeUrlOverride
props respectively.
If you want to develop against your account in production, you can update these values to the following:
baseUrl: http://freeday.me
iframeUrlOverride: https://chat-widget.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.
If you're having any trouble getting started or just want to say hi, ask Beaudinn add Slack.
FAQs
Freeday chat widget
The npm package @freeday-ai/chat-widget receives a total of 1 weekly downloads. As such, @freeday-ai/chat-widget popularity was classified as not popular.
We found that @freeday-ai/chat-widget demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.