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 : Credentials Tab

Step 3 : Configure Settings

Step 4 : Choose Colors

Step 5 : Preview

Step 1 : Open the Editor

1. Go to Ai Chatbot template.

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

Step 2 : Credentials Tab

The Credentials tab manages your AI provider connection, API authentication, chatbot context, and assistant personality.

1. AI Provider

Select which AI service powers your chatbot.

* OpenAI — OpenAI (GPT models)

* Anthropic Claude — Anthropic (Claude models)

* Google Gemini — Google (Gemini models)

The configuration fields below change dynamically based on the selected provider.

2. OpenAI, Claude & Gemini Configurations

a. OpenAI Configuration

API KEY Configuration

Prefix Required: sk-

Your secret API key for authenticating with OpenAI. Get yours at platform.openai.com/api-keys.

- Never share your API key publicly. It is stored securely and used only for chatbot requests.

OpenAI Model

* GPT-5.4 Pro — Most powerful model, highest cost

* GPT-5.4 — Balanced performance

* GPT-5.4 Mini — Fast and cost-effective (default)

* GPT-5.4 Nano — Lightweight, fastest response

- Ensure your API key has access to the selected model.

b. Claude Configuration

API KEY Configuration

Type: Password input — Placeholder: sk-ant-... — Prefix Required: sk-ant-

Your Anthropic API key. Get yours at console.anthropic.com.

Claude Model

* Claude Opus 4-6 — Most capable, complex reasoning

* Claude Sonnet 4-6 — Balanced speed and intelligence

* Claude Haiku 4-5 — Fastest, most cost-effective

- Claude 4.x series with enhanced capabilities.

c. Gemini Configuration

API KEY Configuration

Type: Password input — Placeholder: AIza... — Prefix Required: AIza

Your Google AI Studio API key. Get yours at makersuite.google.com/app/apikey.

Gemini Model

* Gemini 3.1 Pro Preview — Latest preview, most capable

* Gemini 3 Flash Preview — Fast preview model

* Gemini 3.1 Flash Lite Preview — Lightweight preview

* Gemini 2.5 Pro — Stable, high performance

* Gemini 2.5 Flash — Fast and efficient

* Gemini 2.5 Flash Lite — Most lightweight

- Gemini 3 series includes the latest preview models.

3. Website URLs

Type: Dynamic URL list — Max URLs: 10

Provide up to 10 website pages for the chatbot to analyze. The content from these URLs is used to enrich the chatbot's responses with context from your site.

* Click + Add to add a new URL field

* Enter a full URL (e.g., https://example.com)

* Click Analyze all to process all entered URLs

* Remove a URL by clearing the field or clicking the remove button

- The chatbot uses this content to give more accurate, site-specific answers.

4. System Prompt

Define the chatbot's personality, role, and behavior. This is the base instruction sent to the AI with every conversation.

Click a preset to instantly apply a predefined personality:

* Sales — Sales Rep: High-energy, highlights product benefits, overcomes objections, encourages action

* Support — Tech Support: Calm, patient, step-by-step problem solving using documentation

* Creative — Brand Ambassador: Witty, uses emojis, engaging and fun conversations

* Reset — Default Assistant: Professional, friendly, helpful and concise (default)

5. Save Credentials

Click Save Credentials to save all settings. Changes are applied immediately to the chatbot.

Step 3 : Configure settings

View settings control the chat box dimensions including width from 280 to 800 pixels and height from 200 to 700 pixels, the margin distance from each edge of the screen, the left or right positioning, the corner roundness level from sharp to fully rounded, and whether the chat opens automatically on page load or stays closed until the visitor clicks the button.

Header settings manage the top bar of the chat window, allowing you to show or hide it entirely, adjust the size of the avatar, name, status text and close button, toggle the avatar visibility, and edit the bot's display name and status text such as "Online" with real-time preview.

Welcome Screen settings configure the initial greeting that appears when the chat opens, with options to disable it entirely, set the overall size and corner roundness of the action buttons, flip the layout to place actions above the welcome text, choose the avatar position around the message, edit the welcome text and start button label, and add up to nine predefined clickable messages that send instantly to the AI when tapped.

Floating Button settings customize the circular button that visitors click to open the chat, controlling its overall size from small to xlarge, its corner roundness from sharp to a perfect circle, the SVG icon displayed inside, and the label text shown next to the icon such as "Need Help?".

Chat Box settings configure the main discussion area with options to toggle AI-suggested action buttons and the thinking indicator, choose how the thinking indicator appears with custom text, a predefined message, or dots only, set the send button roundness and icon, switch between left and right layout direction, control how many messages the bot remembers from 50 to 500, set the number of days before chat history is automatically deleted, and customize the input field placeholder and send button label.

- Image settings let you set the avatar image displayed in both the header and the welcome screen, and control its corner roundness from a square shape to a perfect circle.

Step 4 : Choose Colors

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

Step 5 : 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.