Web Agent guide

How to set up and install the Web Agent on your website

The Web Agent is an AI chat assistant that lives on your website and answers visitors in real time. This guide walks you through configuring it in the dashboard and installing it on your site yourself — step by step, no developer needed.

~10 minutesNo coding requiredWorks on any website14+ languages

The whole idea in one line

You configure the agent once in your Safqat dashboard, then paste a short code snippet into your website. A chat bubble appears for your visitors and the AI answers their questions from the knowledge you provided.

What is the Web Agent?

The Web Agent is a chat widget you embed on your website. It greets visitors, answers their questions instantly using your uploaded knowledge base, replies in their language, and hands the conversation over to your team whenever a human is needed. Every conversation, rating, and lead is captured in your dashboard.

Answers FAQs and product questions from your own knowledge base

Replies in 14+ languages with a tone you choose

Matches your brand — colors, logo, light or dark mode

Lets your team take over a chat at any time

Can proactively greet visitors on key pages

Tracks conversations, satisfaction, and conversions

Part 1 — Set up your agent in the dashboard

Open your Safqat dashboard and go to Web Agent → Setup. A guided 7-step wizard walks you through everything below. You can change any of these later from Web Agent → Settings.

Step 1

Choose language & focus area

Pick the main language your agent speaks (Arabic, English, French, and 11+ more) and the focus area that best fits your business — customer service, sales, support, or feedback. This shapes how the agent introduces itself and replies.

Step 2

Add your business information

Enter your business name (shown to visitors), optionally upload your logo, and choose a tone of voice.

Tone options: professional, friendly, casual, or formal
The logo appears in the chat header — use a square image for best results

Step 3

Name your agent personas

Provide four agent names. These are the friendly names visitors see in the chat (for example a greeting from "Sarah"). The wizard pre-fills sensible names for your chosen language — keep them or change them.

Step 4

Customize the appearance

Pick a primary color that matches your brand and choose light or dark mode. This controls how the chat bubble and window look on your site.

Step 5

Add your allowed domains

List the website domains where the agent is allowed to run (for example yourstore.com). This protects your agent so it only works on sites you own.

Add every domain and subdomain your site uses
Keep "allow localhost" on while you test on your own computer

Step 6

Upload your knowledge base

This is what makes the agent smart. Upload documents or paste text describing your products, policies, hours, shipping, returns — anything customers ask about. The agent answers from this content.

Supported files: PDF, DOCX, TXT, XLSX, CSV, JSON
You can also paste knowledge directly as text
The richer your knowledge, the better the answers

Step 7

Review, set a greeting & activate

Write the first message visitors see when they open the chat, review your settings, then activate the agent. The final screen also shows your install code — that's what you'll use in Part 2.

Part 2 — Install it on your website

Once your agent is active, installing it is a copy-and-paste job. The snippet is two short lines of code that load the widget and connect it to your agent.

Where to find your code

Go to Web Agent → Settings → Integration Code (it's also shown on the last step of the setup wizard). Click the copy button to grab your snippet — it already contains your unique agent ID.

Your snippet looks like this:

embed code

<script src="https://cdn.safqat.ai/widget.js" data-safqat-api-base="https://safqat.ai"></script>
<script>
  Safqat.init({
    agentId: "your-agent-id",
    apiBase: "https://safqat.ai"
  });
</script>

1
Copy your snippet from the dashboard
Use the copy button so your real agent ID is included. The example above uses "your-agent-id" as a placeholder — yours will be a unique value.
2
Paste it into your website
Add the snippet just before the closing </body> tag on every page where you want the chat to appear. On platforms like Shopify, WordPress, or Wix, paste it into the "custom code" or "header/footer scripts" section so it loads site-wide.
3
Publish and refresh
Save and publish your site, then reload the page. A chat bubble appears in the corner — click it to start a conversation.

Optional: identify logged-in visitors

If your site has accounts, you can pass each visitor's details so conversations are tied to the right person. Only do this for visitors you actually know (e.g. after login).

identified visitors

Safqat.init({
  agentId: "your-agent-id",
  apiBase: "https://safqat.ai",
  user: {
    id: currentUser.id,     // unique per visitor
    name: currentUser.name,
    email: currentUser.email
  }
});

Important: use each visitor's own unique id. Never paste one fixed id for everyone — if you do, all visitors will share the same conversation.

Verify it's working

Before telling customers about it, do a quick check on your live site:

The chat bubble appears on your published website
Sending a test message gets an AI reply based on your knowledge base
The conversation shows up in Web Agent → Conversations in your dashboard
Your live domain is listed under allowed domains (otherwise the widget won't load)