A chat widget for embedding Gooey.AI bots on your website.
If you're new, you should probably head over to gooey.ai/copilot, create and test your integration there. This guide is for advanced users.
- Copy the following code into the
<body>section of your target HTML file where you want the widget to appear:
<div id="gooey-embed"></div>
<script src="https://cdn.jsdelivr.net/gh/GooeyAI/gooey-web-widget@2/dist/lib.js"></script>
<script>
GooeyEmbed.mount({ target: "#gooey-embed", integration_id: "<Your Integration ID>" });
</script>If you use the lib.js provided from gooey.ai, the config will be automatically provided based on your settings.
<script src="https://gooey.ai/chat/<Name>-<Integration ID>/lib.js"></script>- Replace
"<Your Integration ID>"with your Integration's ID, as it appears on the Integration tab.
const config = {
target: "#gooey-embed",
integration_id: "MqL",
mode: "popup" | "inline" | "fullscreen",
enableAudioMessage: true,
showSources: true,
branding: {
name: "Farmer.CHAT",
byLine: "By Digital Green",
description: "An AI Assistant designed to help farmer extension agents in India.",
conversationStarters: [
"When should I plant chili?",
"How can I get rid of black ants on my coffee?",
"What is the best time to grow pepper in India?",
],
fabLabel: "Help",
photoUrl: "https://digitalgreen.org/wp-content/themes/digital-green/images/favicons/apple-touch-icon.png",
websiteUrl: "https://digitalgreen.org/",
showPoweredByGooey: true,
},
payload: {
user_id: "123",
},
}
GooeyEmbed.mount(config);Specifies the CSS selector of the div where the widget will be embedded.
The unique identifier for your Gooey Bot Integration. (Note that this is snake_case, to match the Gooey API payload)
Determines how the Gooey widget is displayed on your site:
popup: This mode renders a Floating Action Button that, when clicked, opens the widget in a pop-up overlay. Ideal for adding support chat without altering your page layout.
inline: This mode embeds the widget directly within the page content at the location specified by thetarget. Suitable for integrating the widget as a part of your webpage like a contact form.
fullscreen: This mode renders the widget in fullscreen mode, covering the entire page. Ideal for creating a dedicated chat page.
A boolean to enable or disable recording and sending audio messages to the bot.
A boolean that dictates whether sources of information (if any) should be shown.
Controls visual aspects of the widget and defines the textual content and related URLs for the bot's appearance and initial interaction prompts.
name: The name of the bot displayed at the top of the chat interface.byLine: A short attribution line appearing below the bot name.description: A brief description of the bot's purpose.conversationStarters: An array of strings presented as initial messages to help guide the user on how to interact with the bot.fabLabel: The label for the Floating Action Button in popup mode.photoUrl: The URL of an image used as the bot's avatar.websiteUrl: A URL to the bot's or company's homepage, which can be accessed for more information.showPoweredByGooey: A boolean to show or hide the "Powered by Gooey" attribution in the widget.
Contains the data sent to the Gooey API. Consult the Gooey API documentation for additional payload options.
- Install Node LTS version (v18) using nvm:
nvm install 18.12.0
- Clone the repository:
git clone https://github.com/GooeyAI/gooey-web-widget.git
- Navigate into your cloned directory and install dependencies:
cd gooey-web-widget npm install - Start the React server:
npm run dev
- Open localhost:5173 in your browser to view the project.
-
Build the library:
npm run build
-
The output will be available in the
dist/directory. -
Test the widget opening
test.htmlin your browser. -
To test inside other projects, run a python web server:
python -m http.server 9000
and open localhost:9000/test.html in your browser.
(For the gooey server, set
WEB_WIDGET_LIB=http://localhost:9000/dist/lib.js)
-
Build the library:
npm run build
-
Commit your changes
-
Tag the commit with the new version number:
git tag -a 2.x.x
-
Push the commit with tags:
git push origin master --tags
-
Purge the jsdelivr cache
If you want to ensure your clients get the latest version of the lib (ahead of the cache), please specify the version in the URL like so:
https://cdn.jsdelivr.net/gh/GooeyAI/[email protected]/dist/lib.jsFor Gooey Server, update the
WEB_WIDGET_LIBenvironment variable. -
If you make a major version change, update this README.md and
WEB_WIDGET_LIBin the Gooey server.
src/widgets/*: List of embeddable React components.index.html+src/main.tsx: Entry point for the development React app.src/lib.tsx: Library entry point for the widget.vite.config.js: Configuration for bundling the library.