🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →

Book a Demo Install Sign in

gooey-copilot-widget

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

gooey-copilot-widget

A clean, self-hostable web widget for Gooey.AI Copilots, with streaming support with every major LLM, speech-reco, and Text-to-Speech covering 1000+ languages, photo uploads, feedback, and analytics.

0.0.1

latest

npm

Version published: 2 months ago

Maintainers: 1

Created: 2 months ago

Source

A clean, self-hostable web widget for Gooey.AI Copilots, with streaming support with every major LLM, speech-reco, and Text-to-Speech covering 1000+ languages, photo uploads, feedback, and analytics.

Fork for customized branding and functionality (or use our hosted version available under Copilot Integrations).

Raw Library Usage

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.

Configuration Options

Example:

const config = {
  target: "#gooey-embed",
  integration_id: "MqL",
  mode: "popup" | "inline" | "fullscreen",
  enableAudioMessage: true,
  showSources: true,
  enablePhotoUpload: true,
  enableConversations: 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",
    variables: {
        "product_id": "sample_id",
        "product_name": "sample_name"
    },
  },
}
GooeyEmbed.mount(config);

`target: string` Required

Specifies the CSS selector of the div where the widget will be embedded.

`integration_id: string` Required

The unique identifier for your Gooey Bot Integration. (Note that this is snake_case, to match the Gooey API payload)

`mode: string (popup | inline)`

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

`enableAudioMessage: boolean`

A boolean to enable or disable recording and sending audio messages to the bot.

`enableConversations: boolean`

A boolean to enable or disable the user's conversation history.

When enabled a "New Chat" button will be shown in top-right corner and in a left drawer, which will also list all the previous conversations.
When disabled, a single conversation is maintained in the database for every session and all the messages will be pre-loaded in the state

`enablePhotoUpload: boolean;`

A boolean to enable or disable the photo upload button.

`showSources`

A boolean that dictates whether sources of information (if any) should be shown.

`branding: object`

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.

`payload: object`

Contains the data sent to the Gooey API. Consult the Gooey API documentation for additional payload options.

Note: If you want to work with "variables" in payload, refer to our Advanced prompting guide

Project Setup Guide

Initial Setup

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.

Building and Testing

Build the library:
```
npm run build
```
The output will be available in the dist/ directory.
Test the widget opening test.html in 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 )

Publishing

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/gooey-web-widget@2.x.x/dist/lib.js

For Gooey Server, update the WEB_WIDGET_LIB environment variable.
If you make a major version change, update this README.md and WEB_WIDGET_LIB in the Gooey server.

Notes

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.

💣 Secret Scanning

Gitleaks will automatically run pre-commit (see pre-commit-config.yaml for details) to prevent commits with secrets in the first place. To test this without committing, run pre-commit from the terminal. To skip this check, use SKIP=gitleaks git commit -m "message" to commit changes. Preferably, label false positives with the #gitleaks:allow comment instead of skipping the check.

Gitleaks will also run in the CI pipeline as a GitHub action on push and pull request (can also be manually triggered in the actions tab on GitHub). To update the baseline of ignored secrets, run python ./scripts/create_gitleaks_baseline.py from the venv and commit the changes to .gitleaksignore.

FAQs

Package last updated on 13 May 2025

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.

Install

gooey-copilot-widget

Gooey Web Widget

Raw Library Usage

Configuration Options

Example:

`target: string` Required

`integration_id: string` Required

`enableAudioMessage: boolean`

`enableConversations: boolean`

`enablePhotoUpload: boolean;`

`showSources`

`branding: object`

`payload: object`

Project Setup Guide

Initial Setup

Building and Testing

Publishing

Notes

💣 Secret Scanning

Related posts

gooey-copilot-widget

Gooey Web Widget

Raw Library Usage

Configuration Options

Example:

target: string Required

integration_id: string Required

mode: string (popup | inline)

enableAudioMessage: boolean

enableConversations: boolean

enablePhotoUpload: boolean;

showSources

branding: object

payload: object

Project Setup Guide

Initial Setup

Building and Testing

Publishing

Notes

💣 Secret Scanning

Related posts

ECMAScript 2025 Finalized with Iterator Helpers, Set Methods, RegExp.escape, and More

Node.js Homepage Adds Paid Support Link, Prompting Contributor Pushback

`target: string` Required

`integration_id: string` Required

`mode: string (popup | inline)`

`enableAudioMessage: boolean`

`enableConversations: boolean`

`enablePhotoUpload: boolean;`

`showSources`

`branding: object`

`payload: object`