Fouita Widgets

Welcome to the “Ai Chatbot” documentation. Looking to integrate Ai Chatbot into your website? Our widget allows you to create engaging chat experiences that enhance user engagement and interaction. In this guide, we'll show you how to use the editor to customize your social chat widget.

Step 1 : Open the Editor

Step 2: Create new API key

Step 3: Create new Assistant

Step 4 : Configure Settings

Step 5 : Choose Colors

Step 6 : Preview

Step 1 : Open the Editor

1. Go to Ai Chatbot template.

2. Click on "Edit" after choosing your template.

Step 2: Create new API key

1. Go to Openai API-keys.

2. Click on "Create new secret key".

3. Click on "Create secret key".

4. Copy your API key and paste it into your Fouita widget “Credentials”

Step 3: Create new Assistant

1. Go to Openai Assistants.

2. Click on "+Create".

3. Copy your Assistant ID and paste it into your widget's “Assistant ID” field.

Step 4: Configure settings

Start with the "View" section, where you can fine-tune the button's margin, choose the chat's position, adjust its roundness, insert your bot text, and add a title for the button. You can also enable or disable the Start Menu and the auto-prompt.

Choose to show or hide the header. Next, name the chat and set its status.

Also, you have the option to upload an image and select its position.

Customize the floating button by adjusting its roundness, selecting an icon, adding a label to it and specify its size.

For the chat box, you can input the text label, adjust the button roundness, choose an icon for it, and edit the label text.

Step 5: Choose Colors

Within this panel, you can select colors that match your website's design.

Step 6: Preview

Lastly, you can click on “Preview” to see how your Ai Chatbot widget looks on both desktop and mobile devices. After this, you can proceed to the next step.