Skip to main content

Web Widget

Basicly, there are 2 ways to use the Widget Platform:

  1. Use our hosted solution
  2. Use your own hosted solution

Use Widget Platform hosted solution​

It is the easiest way to get started and it is free.

  1. Create a new assistant in the Widget Platform
  2. Generate the code for the widget
  3. Add the code to your website
  4. That's it!

Use your own hosted solution​

It is more flexible and you can customize the solution to your needs, you don't need to share your OpenAI API key with us, but you have to host the solution yourself. That means you need to have a server to host the backend for the widget.

Our widget codebase is open source and available on GitHub. Create a clone of the repository and follow the instructions below.

You will get a React & Vite project with a working example.

In this repository, there are 2 main project parts:

  • widget - The main web widget that you can embed in your website
  • app - The React app that you can use inside the web widget (as an iframe)

In this repository, you will find very basic structure.

  1. Modify the .env file with your OpenAI API key and add OpenAI Assistant ID
  2. Install dependencies with npm install
  3. Run the project with npm run dev

Why I need a server?​

It uses the OpenAI API to communicate with the OpenAI Assistant. It is important to not using your own OpenAI API key in the client side of your website.

Can I modify the widget and use Widget Platform Server?​

Yes, you can. Keep address api-widget-oa.widgetplatform.com as a API address in your .env file.

Can I use my own backend server?​

Yes, you can. You can use our server codebase as a starting point. It is available on GitHub or create your own. Here is an API which you need to implement:

  • POST /chat/
  • POST /feedback/

/chat/​

This endpoint is used to send a message to the assistant and receive a response. Use streaming response to send the response back to the widget. The message should be in format data: <JSON string>. Use this two formats for the response:

  • data: {"info": {"id": "<thread_id>"}} -- this is used when the thread is started
  • data: {"content": "<message>"} -- this is used to send a message from the assistant back to the user