@bavard/bavard-react
v0.0.26
Published
React components for working with Bavard chatbots
Downloads
54
Readme
Bavard React Components
A small set of React components for easily including Bavard chatbots within any React app.
Setup
1. Install the npm package.
npm i @bavard/bavard-react
2. Import and use the Bavard React components in your app. For example:
import React from "react";
import { ChatbotWindowPopup } from "@bavard/bavard-react/ChatbotWindowPopup";
import { ChatbotWindowEmbed } from "@bavard/bavard-react/ChatbotWindowEmbed";
function App() {
return (
<div style={{ display: "flex", justifyContent: "center" }}>
<ChatbotWindowPopup agentId="b4d9de5e-2325-4244-98c4-1526643dd0da" />
<ChatbotWindowEmbed
agentId="b4d9de5e-2325-4244-98c4-1526643dd0da"
widgetId={1}
style={{ height: 600, width: 400 }}
/>
</div>
);
}
export default App;
Popup Window
Add a popup chatbot window to your app like this. It's only possible to render a single instance of the popup window at a time.
<ChatbotWindowPopup agentId="b4d9de5e-2325-4244-98c4-1526643dd0da" />
This will cause a popup-style chatbot to appear in the window's lower right corner.
Embed Window
Add an embeddable chatbot window to your app as in the code below. You can add as many instances as you like, but each one must have a distinct widgetId
number which should be a positive integer. The embed window is rendered inside a div
. The dimensions are completely up to you, but we recommend at least 375px in width.
<ChatbotWindowEmbed
agentId="b4d9de5e-2325-4244-98c4-1526643dd0da"
widgetId={1}
style={{ height: 600, width: 400 }}
/>
Here's what an embed chatbot window looks like.