How to Install the Callsup AI Support Widget on Any Website in 5 Minutes

What You'll Need

• A Callsup account (free at callsup.ai)
• Access to your website's HTML (or Shopify theme editor, WordPress admin, etc.)
• Your knowledge base documents (PDFs, Word docs, or plain text — optional but recommended)

Total time: under 5 minutes for a basic setup. 15 minutes for a fully configured AI agent.

---

Step 1: Create Your Callsup Account

Head to callsup.ai and sign up. No credit card required for the free plan.

Once inside the dashboard, click "Add Company" — a "company" in Callsup represents your website or business. Give it a name (e.g., "My Store" or "Support Widget").

---

Step 2: Get Your Widget Script

In your company dashboard, navigate to Settings → Widget. You'll see a configuration panel and your unique embed script:

``html

src="https://callsup.ai/widget.js"

data-company-id="YOUR_COMPANY_ID"

defer

>

`

Copy this script. This is the only code you need to install.

---

Step 3: Install on Your Website

Option A: Plain HTML Website

Paste the script just before the closing tag in your HTML:

`html

...

src="https://callsup.ai/widget.js"

data-company-id="YOUR_COMPANY_ID"

defer

>

`

Option B: Shopify Store

• In Shopify Admin, go to Online Store → Themes
• Click Actions → Edit Code on your active theme
• Open layout/theme.liquid
• Paste the script before the tag
• Click Save

The widget will appear on every page of your store within seconds.

Option C: WordPress

• Install the "Insert Headers and Footers" plugin (free on WordPress.org)
• Go to Settings → Insert Headers and Footers
• Paste the script in the Footer section
• Save

Alternatively, paste it directly in your theme's footer.php file.

Option D: Next.js / React App

Add the script using Next.js's built-in Script component:

`tsx

import Script from 'next/script';

export default function RootLayout({ children }) {

return (

{children}

src="https://callsup.ai/widget.js"

data-company-id="YOUR_COMPANY_ID"

strategy="lazyOnload"

/>

);

}

`

Option E: Webflow

• In Webflow Designer, go to Project Settings → Custom Code
• Paste the script in the Footer Code section
• Publish your site

---

Step 4: Upload Your Knowledge Base

This is what makes the AI actually useful. Without documents, the AI gives generic answers. With your knowledge base, it gives precise, accurate answers grounded in your actual content.

What to upload:

• Return & refund policy (PDF or Word)
• FAQ document
• Product manuals or guides
• Shipping information
• Terms of service

How to upload:

In your Callsup dashboard, click your company → Documents → Upload Document. Drag and drop your files. Callsup supports PDF, Word (.docx), plain text, and CSV.

The system processes each document in 1–2 minutes, chunking and indexing the content for semantic search. Once processed, the AI can answer questions from any part of the document.

---

Step 5: Configure Your Widget

In Settings → Widget, customize:

• Widget color — Match your brand colors
• Welcome message — What the AI says when the chat opens (e.g., "Hi! I'm your support assistant. Ask me anything about your order or our products.")
• Agent name — Give your AI a name ("Aria", "Max", "Support Bot")
• Voice enabled — Toggle voice input/output on or off
• Business hours — Show a "Leave a message" option outside business hours

---

Step 6: Test Your Widget

Open your website in a browser. You should see the Callsup chat button in the bottom-right corner. Click it and ask a question from your uploaded documents.

Pro tip: Test edge cases — ask something your policy document addresses but that isn't obvious. If the AI answers correctly, your knowledge base is indexed properly.

---

Step 7: Set Up Escalation (Optional but Recommended)

Go to Settings → Agent → Escalation Rules. Define when the AI should hand off to a human:

• Keywords that trigger escalation: "refund", "complaint", "dispute"
• Low-confidence threshold: If the AI scores below 70% confidence, escalate
• After N turns: If the conversation goes more than 6 turns without resolution

When a conversation escalates, you (or your team) receive a notification with the full chat context pre-loaded. No starting from scratch.

---

You're Live

That's it. Your AI support agent is now live. It will:

• Answer questions 24/7 in 100+ languages
• Access your Shopify order data (if connected) in real time
• Support both text chat and voice conversation
• Escalate to a human when needed

Average time to first AI-resolved conversation: less than 5 minutes after installation.

---

Troubleshooting

Widget not appearing?

• Check that the script is placed before , not `
• Verify your Company ID is correct in the data attribute
• Clear your browser cache and reload

AI giving incorrect answers?

• Re-upload your knowledge base documents
• Check if the documents were processed (green checkmark in Documents tab)
• Add more specific content to your FAQ document

Voice not working?

• Voice requires HTTPS. Make sure your site uses SSL (https://)
• Check browser microphone permissions
• Voice must be enabled in Widget Settings

*Need help? Sign in to your dashboard and use the in-app chat — yes, it's powered by Callsup itself.*