🔒 Secure
Step 01 of 05

Set up your
secure worker

Set up your Cloudflare Worker once — it hides your API key and blocks spam.

🛡️ Without a worker your API key is visible in the HTML file where anyone can steal it.
How to set up (do this once)
1

Sign up free

Go to workers.cloudflare.com and create a free account.

2

Create Worker and paste the code

Create Worker → Start with Hello World → Deploy. Then Edit code, select all, paste the worker.js file, Deploy again.

3

Add your API key as a secret

Settings → Variables and Secrets → Add. Name it ANTHROPIC_API_KEY, type Secret, paste your Claude API key, save.

4

Redeploy to activate

Go back to Edit code and Deploy one more time.

Your Cloudflare Worker URL

No worker yet? Use Direct mode below for testing only.

Direct mode — testing only
Claude API Key
⚠️ This puts your key in the HTML file. Testing only.
Website URL to build chatbot for
Business Name (optional)
Step 02 of 05

Reading the
website

Pulling content so the AI knows the business inside out.

Extracting business information...
Connecting...
Step 03 of 05

Your chatbot's
brain

Claude has written a custom sales prompt. Review and edit it freely.

System Prompt
Appearance
Bot name
Welcome message
Chat colour
Position
Client ID (for worker)

Must match the key in your worker.js

Branding text
Branding link (optional)
Lead notifications (optional)
Your email
Web3Forms key

Get a free key at web3forms.com — you'll get an email every time someone leaves their contact details in the chat.

Step 04 of 05

Test your
chatbot live

Opens in a new tab so everything works properly.

🤖
Your chatbot is ready

Click below to open a live preview. Try asking about pricing, services, or drop your number to test lead capture.

🔒 All requests go through your secure Cloudflare Worker.
Step 05 of 05

Deploy your
chatbot

Download and follow the instructions for your platform.

Download chatbot.html
One secure file — no API key inside.
🔒 No API key in this file. All AI calls go through your Cloudflare Worker.
1

Upload chatbot.html to your server

Via FTP or cPanel, upload to /public_html/chatbot.html.

2

Install "Insert Headers and Footers" plugin

Plugins → Add New → WPCode → Install → Activate.

3

Paste in footer

Settings → Insert Headers and Footers → Scripts in Footer:

1

Upload chatbot.html to your root folder

Same folder as your index.html.

2

Add before </body> on every page

1

Upload via Content → Files

In Shopify admin, upload chatbot.html and copy the CDN URL.

2

Edit theme.liquid before </body>

⚠️ Requires Wix Premium plan.
1

Settings → Custom Code

Set placement to Body end, All Pages.

2
⚠️ Requires Business plan or higher.
1

Settings → Advanced → Code Injection → Footer

1

Upload chatbot.html to Assets panel

Copy the asset URL.

2

Project Settings → Custom Code → Footer Code

1

Host chatbot.html on Netlify first

Drag to app.netlify.com/drop and copy the URL.

2

Site Settings → Custom Code → End of body

1

Upload via cPanel File Manager → public_html

2

Settings → Website → Header/Footer Code → Footer

1

Settings → SEO → Footer Code

1

Add chatbot.html to your site folder, add snippet to HTML, drag folder to app.netlify.com/drop

1

Add chatbot.html to your site folder, add snippet, zip folder and upload to Workers & Pages → Create → Pages → Upload assets

1

Host chatbot.html on Netlify first, then add HTML element in Bubble, paste snippet

Build another chatbot

Your worker stays active. Enter a new client's URL and repeat.