Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Website Chat

Website Live Chat lets you add a Saifa AI chat widget to your website so visitors can ask questions, get support, and start conversations in real time.

You can customize the widget appearance, home screen, conversation experience, FAQs, and installation code from the Website Chat setup flow.

Before you start

Go to:

Settings → Integration Settings

Find Website Chat, then click Connect.

Saifa AI will guide you through the Website Chat setup steps.

Step 1: Widget Appearance

Use this step to customize how the chat widget looks on your website.

Chat palette

Choose the main color for your chat widget from the Chat palette.

This color will be used for key widget elements such as the chat button, active states, and highlighted actions.

Example:

Color the chat header

Turn on Color the chat header if you want the conversation header to use your selected brand color.

When enabled, the chat header will match your widget color, making the chat experience feel more consistent with your website branding.

If disabled, the widget will use the default header style.

Chat button style

Choose the style of the floating chat button.

You can select a button icon style such as:

Style

Description

Chat bubble

Shows a simple chat bubble icon

Dots bubble

Shows a message bubble with dots

The selected style will appear in the Widget Preview on the right.

Chat button position

Choose where the chat button should appear on your website.

Position

Description

At the bottom of the screen, on the left

Shows the chat button at the bottom-left corner

At the bottom of the screen, on the middle

Shows the chat button at the bottom-center

At the bottom of the screen, on the right

Shows the chat button at the bottom-right corner

For most websites, we recommend placing the chat button at the bottom-right corner so visitors can find it easily without blocking important content.

Enable Chat Invitation

Turn on Enable Chat Invitation to show a small invitation message before visitors open the chat.

This is useful when you want to proactively invite visitors to start a conversation.

Example:

Chat Invitation settings

When Chat Invitation is enabled, you can customize the invitation message.

Field

Description

Assistant logo

Upload an assistant logo or image

Headline Text

Main invitation headline

Description Text

Short supporting message

CTA Label

Button text visitors click to start chatting

Example:

Click Continue when finished.

Step 2: Home Tab

The Home Tab is the first screen visitors see when they open the chat widget.

Use it to introduce your brand, show useful links, promote key content, or guide visitors to start a conversation.

Header Setting

Set the main header information for the Home Tab.

Field

Description

Company Logo

Logo shown in the widget header

Header Title

Main title displayed on the Home Tab

Header Subtitle

Short supporting text under the title

Chat Button Label

Button text for starting a conversation

Example:

Enable Content Card

Turn on Enable Content Card to show a content card on the Home Tab.

A content card can be used to introduce your company, promote a product, explain a service, or guide visitors to a landing page.

If disabled, the content card will not appear in the widget.

Card Setting

Configure the content card details.

Field

Description

Image

Image displayed on the card

Card Title

Title of the card

Card Description

Description shown inside the card

CTA Button Text

Button text on the card

Button Link (URL)

Destination URL when visitors click the button

Example:

Enable Menu Section

Turn on Enable Menu Section to show a list of helpful menu links on the Home Tab.

This section is useful for directing visitors to common actions such as starting a free trial, booking a demo, or viewing pricing.

If disabled, the menu section will not appear in the widget.

Menu Section

Set the menu title and menu items.

Field

Description

Menu Title

Title of the menu section

Menu Item

Name of each menu item

Menu Item Link (URL)

Destination URL for each item

Example:

Click Continue when finished.

Step 3: Conversation

The Conversation step controls how the chat screen appears when visitors start chatting with your business.

Chat Header & Status

Customize the chat header shown at the top of the conversation screen.

Field

Description

Chat Image

Image or logo shown in the chat header

Chat Display Name

Name displayed to visitors

Response Time Status

Expected response time shown to visitors

Example:

The response time status helps set expectations before visitors send a message.

Welcome Message

Add a welcome message that appears when a visitor opens the chat for the first time.

Example:

Keep the welcome message short, friendly, and clear.

Enable Quick Replies

Turn on Enable Quick Replies to show suggested buttons inside the chat.

Quick Replies help visitors start a conversation faster without typing their first message manually.

Example Quick Replies:

Quick Reply settings

Each Quick Reply can have its own action.

Field

Description

Quick Reply

Button text shown to visitors

Action

What happens when the button is clicked

Message to send

Message sent into the chat

Destination URL

URL opened when using Open URL

Available actions:

Action

Description

Send predefined message

Sends a preset message into the chat

Open URL

Opens a destination link

If you choose Send predefined message, enter the message in Message to send.

If you choose Open URL, enter the link in Destination URL.

Message Composer

Customize the message input area.

Field

Description

Input Placeholder

Placeholder text inside the message box

Enable Attachments

Allow visitors to send files

Allowed File Types

File types visitors can upload

Max File Size

Maximum file size allowed

Enable Emoji Picker

Allow visitors to insert emojis

Example placeholder:

Enable Attachments

Turn on Enable Attachments if you want visitors to upload files in chat.

You can choose allowed file types such as:

File Type

Description

Documents

Allows document uploads

Images

Allows image uploads

You can also set the maximum file size.

Example:

Enable Emoji Picker

Turn on Enable Emoji Picker to let visitors add emojis while composing messages.

This can make conversations feel more friendly and natural.

Branding & Footer

  • Turn on Show “Powered by Saifa” to display Saifa branding at the bottom of the chat widget.

If disabled, the footer branding will not be shown.

  • Enable Collect Name and/or Collect Email to ask visitors to provide their name or email before they start a conversation.

Click Continue when finished.

Step 4: Review & Create

Before adding FAQs or installing the widget, review your website chat configuration and create the widget first.

On the Review & Create page, Saifa AI shows a summary of the settings you configured in the previous steps:

Section
What you can review

Widget Appearance

Chat button style and widget position

Home Tab

Home tab name and display content

Conversation

Chat display name and conversation settings

If everything looks correct, click Create Widget to finish creating your Website Chat widget.

After clicking Create Widget, you can continue to manage FAQs Management and get the installation code for your website.

Step 5: FAQs Management

Use FAQs to add frequently asked questions to the chat widget.

FAQs help visitors find answers quickly before starting a conversation.

FAQ List

From the FAQ List, you can:

  • Add a new FAQ

  • Edit an existing FAQ

  • Publish or save FAQs as drafts

  • Preview how FAQs appear in the widget

  • Search for existing questions

  • Manage CTA settings

Add New FAQ

Click + Add New FAQ to create a new FAQ.

Fill in the following fields:

Field

Description

Question

The question visitors will see

Answer

The answer shown when the question is opened

Published

Makes the FAQ visible to visitors

Example:

If Published is turned on, the FAQ will be visible in the widget.

If Published is turned off, the FAQ will be saved as a draft.

FAQ status

Status

Description

Published

Visible to website visitors

Draft

Saved but not visible to visitors

Enable CTA

Turn on Enable CTA to show a call-to-action button on the FAQs tab.

Use this button to guide visitors to a contact page, pricing page, sales page, or conversation screen.

CTA Button Text

Enter the text shown on the CTA button.

Example:

Button Link (URL)

Enter the URL visitors will be directed to when they click the CTA button.

Example:

Go to Conversation

Select Go to Conversation if you want the CTA button to open the Conversation tab instead of an external URL.

When Go to Conversation is selected, the Button Link (URL) field will be disabled.

Click Save CTA Settings or Continue when finished.

Step 6: Installation

The final step is to install the chat widget on your website.

Install the widget on your website

Copy the widget code from the Installation page and paste it into your website code.

We recommend placing the code right before the closing:

Example:

Each widget has its own Public Key. Always use the key generated in your Saifa AI workspace.

Anonymous

Choose Anonymous if your website does not send logged-in user information to Saifa AI.

This option is suitable for public websites where visitors are not identified.

When using Anonymous mode, the widget can open with a pre-chat form if configured.

With User Identity

Choose With User Identity if your website has logged-in users and you want to pass user information to Saifa AI.

This helps connect chat history to specific users and can support cross-device chat history.

Public Key

The Public Key is a unique key used to identify your Website Chat widget.

You can copy it from the Installation page.

To generate a new key, click Regenerate Key.

Regenerating the key will invalidate the previous embed code. You must replace the old code on your website with the new one.

Installation Tips

  • Paste the widget code before the closing </body> tag

  • Open your website after installation to initialize the chat widget

  • The widget loads automatically after the code is installed

  • Pass userId if you want cross-device chat history for logged-in users

  • Make sure ad blockers or script blockers are not blocking the widget

  • If you regenerate the key, update the embed code on your website

Best Practices

  • Use your brand color to make the widget feel native to your website

  • Keep the welcome message short and helpful

  • Enable Quick Replies to help visitors start faster

  • Add FAQs for common questions such as pricing, delivery, support, refunds, or account setup

  • Use CTA buttons to guide visitors to important pages

  • Test the widget on both desktop and mobile

  • Install the widget on every page where you want chat to appear

Troubleshooting

The widget does not appear on my website

Check that:

  • The embed code has been added correctly

  • The code is placed before the closing </body> tag

  • The Public Key is correct

  • JavaScript is not blocked on your website

  • Ad blockers or script blockers are not preventing the widget from loading

Website Live Chat lets you bring Saifa AI directly onto your website.

You can customize the widget appearance, Home Tab, Conversation experience, FAQs, CTA buttons, and installation method from one setup flow.

Once installed, visitors can start chatting with Saifa AI directly from your website.

PreviousZort outNextManaging your account settings

Last updated