Documentation/Install with AI

Install with AI

Let your AI coding assistant do the installation. Pick the prompt for your situation, copy it, answer its questions, done.

What this is

If you use an AI coding assistant — Cursor, GitHub Copilot, Windsurf, Claude Code, ChatGPT or anything similar — you don't need to follow platform-specific instructions yourself. Pick the prompt below that matches where you want the widget, paste it into your assistant, and it will ask you for what it needs and do the work.

Before you paste

Grab your widget key first: open Dashboard → Widget Settings and copy the key shown there (it starts with lr_). Every prompt asks the assistant to request it from you before touching anything, so having it ready saves a round-trip.

Important

Your widget key is tied to your account. Don't paste it into public repositories, screenshots, or shared documents.

Installing in a codebase — React, Next.js, plain HTML, or any framework

For AI code editors (Cursor, Copilot, Windsurf, Claude Code) and chat assistants working on a real code project. The assistant detects your framework from the repo, so it works whether or not LeadReply has a dedicated guide for it.

Install prompt — codebase
You are installing the LeadReply AI chat widget into my codebase.

ABOUT LEADREPLY
LeadReply is an AI chat widget that answers visitor questions and captures
leads. Installation is ONE script tag added to my site. It loads
asynchronously, fetches everything else on demand, and follows client-side
route changes by itself, so it does not slow the page down.

WHAT YOU NEED FROM ME (ask before editing anything)
- My widget key. I find it in my LeadReply dashboard under "Widget
  Settings" (it starts with lr_). If I haven't pasted it yet, STOP and ask
  for it before touching any file.
- Where the widget should appear (default: every public page).

THE LOADER
<script src="https://leadreply.xyz/widget/embed?key=YOUR_WIDGET_KEY" async></script>

HOW TO INSTALL
1. Detect my framework from the repo (package.json, file structure). Only
   ask me if you genuinely cannot tell.
2. Prefer ONE shared location that renders on every page — a root layout
   or theme template — over pasting the snippet into individual pages.
3. Replace YOUR_WIDGET_KEY with my key exactly as I gave it. Never invent,
   shorten, or reformat the key.
4. Next.js App Router: in app/layout.tsx, import Script from 'next/script'
   and render <Script src="(the same URL)" strategy="afterInteractive" />
   inside <body>. This works in a server layout; do not add "use client"
   or a useEffect wrapper. Pages Router: same Script tag in pages/_app.tsx.
   Do not use strategy="lazyOnload" or "worker".
5. Vite, Create React App and other single-page apps: paste the script tag
   into index.html inside <head>. No React component is needed.
6. Keep the URL exactly as written. Do not bundle the script, import it as
   a module, or rewrite it.

CHECKS BEFORE YOU FINISH
- If my site sends a Content-Security-Policy header, allow
  https://leadreply.xyz in script-src, connect-src and frame-src —
  otherwise the widget is blocked.
- Never commit my widget key to a public repository, and don't hardcode it
  anywhere I didn't ask for.

WHEN YOU'RE DONE
Summarize exactly which files you changed, then tell me how to verify: open
the live site in a private window, look for the floating chat bubble in the
bottom corner, and send a test message (it should land in my Lead Inbox).

Website builders — Wix, Squarespace, Webflow, Weebly and similar

No code files involved: the assistant guides you click-by-click to your builder's custom-code settings and adapts if your builder isn't explicitly listed.

Install prompt — website builders
You are guiding me, step by step, to add the LeadReply AI chat widget to
my website builder. I cannot edit code files — I can only paste code into
my builder's custom-code settings. Keep me on that path.

WHAT YOU NEED FROM ME FIRST
Before giving me any step, ask me:
1. My widget key — I find it in my LeadReply dashboard under "Widget
   Settings" (it starts with lr_). If I haven't given it yet, ask again
   before continuing.
2. Which website builder I use, if I haven't said (for example Wix,
   Squarespace, Weebly, Webflow, GoDaddy, Hostinger, WordPress.com or
   Google Sites).

THE SNIPPET I WILL PASTE
<script src="https://leadreply.xyz/widget/embed?key=YOUR_WIDGET_KEY" async></script>
Replace YOUR_WIDGET_KEY with my key exactly as I gave it before showing me
the final snippet.

HOW TO GUIDE ME
1. Give me ONE step at a time and wait for my reply before continuing.
2. Tell me where the custom-code / tracking-scripts setting lives in MY
   builder, using the exact menu names. If a setting doesn't exist, say
   what to try instead.
3. The snippet must load on ALL pages, ideally from the <head>. If my
   builder asks for a placement, choose Head and "all pages"; if it only
   allows body, that still works.
4. Prefer the builder's site-wide custom-code area over per-page settings.

CHECKS
- If my builder exposes a security or Content-Security-Policy setting,
  https://leadreply.xyz must be allowed for scripts, connections and
  frames, or the widget is blocked.
- Wix needs a Premium plan with a connected domain for custom code, and
  Squarespace needs a Core, Plus or Advanced plan for code injection. If my
  plan doesn't allow custom code, tell me plainly.
- My widget key is tied to my account — remind me not to paste it into
  public forums or share it on screen.

FINISH
After I've saved the snippet, have me verify: open the live site in a
private window, look for the floating chat bubble in the bottom corner,
and send a test message. If no bubble appears, walk me through: re-check
the key was replaced correctly, confirm the snippet actually saved, purge
any caching or "performance" setting my builder has, and if it still
fails, email help@leadreply.xyz with my site URL.

WordPress

The assistant first works out what access you have (admin only, page builder, or file access), then walks you through the easiest method that works for your setup.

Install prompt — WordPress
You are guiding me, step by step, to add the LeadReply AI chat widget to
my WordPress site. Find out what kind of access I have before choosing a
method.

WHAT YOU NEED FROM ME FIRST
Ask me:
1. My widget key — I find it in my LeadReply dashboard under "Widget
   Settings" (it starts with lr_). If I haven't given it yet, ask again
   before continuing.
2. What access I have: only the WordPress admin dashboard, or the site's
   files too (FTP / host file manager).
3. Whether a page builder (Elementor, Divi, WPBakery) manages the site.

THE SNIPPET
<script src="https://leadreply.xyz/widget/embed?key=YOUR_WIDGET_KEY" async></script>
Replace YOUR_WIDGET_KEY with my key exactly as I gave it.

HOW TO GUIDE ME — pick the FIRST method I can actually do:
1. Plugin method (easiest, no code files): install a code-snippets plugin
   such as WPCode or an "Insert Headers and Footers" plugin from
   Plugins → Add New, open its settings, and paste the snippet into the
   header-scripts area, set to load site-wide (every page, head location).
2. Page-builder method (if I use Elementor or Divi): Elementor → Custom
   Code, or Divi → Theme Options → Integrations, paste the snippet with
   head placement.
3. Theme editor method (only if no plugin or builder option): Appearance →
   Theme File Editor → header.php, paste the snippet just before
   </head>. Warn me that a theme update can overwrite this and a block
   theme may not expose header.php at all.
4. On WordPress.com, plugins need a paid plan (Personal or higher). If my
   plan or host blocks plugins and code edits, say so plainly and point me
   to the plan's custom-code option, or the host's file-manager method.

RULES
- One step at a time; wait for my confirmation before the next step.
- After the snippet is in, have me purge any caching plugin and host
  cache before testing.
- If my site uses a security or Content-Security-Policy plugin,
  https://leadreply.xyz must be allowed for scripts, connections and
  frames, or the widget is blocked.
- My widget key is tied to my account — remind me not to paste it into
  public forums.

FINISH
Have me verify: private window → live site → floating chat bubble in the
bottom corner → send a test message (it should land in my Lead Inbox).
If it still fails, email help@leadreply.xyz with the site URL.

Shopify

Paste-and-click guidance for the Shopify admin — theme code editor first, app-based alternative if you'd rather not touch the theme.

Install prompt — Shopify
You are guiding me, step by step, to add the LeadReply AI chat widget to
my Shopify store. I can use the Shopify admin; assume no coding
experience.

WHAT YOU NEED FROM ME FIRST
Ask me for my widget key — I find it in my LeadReply dashboard under
"Widget Settings" (it starts with lr_). If I haven't given it yet, ask
again before continuing.

THE SNIPPET
<script src="https://leadreply.xyz/widget/embed?key=YOUR_WIDGET_KEY" async></script>
Replace YOUR_WIDGET_KEY with my key exactly as I gave it before showing me
the final snippet.

HOW TO GUIDE ME (exact menu names)
1. Shopify admin → Online Store → Themes.
2. On my current theme, click the "..." (three dots) button and choose
   Edit code. (On older themes this is the Actions menu → Edit code.)
3. In the Layout folder, open theme.liquid.
4. Paste the snippet just before </head>.
5. Save, then refresh the storefront.
ALTERNATIVE: if I'd rather not touch theme code, guide me to install a
"Custom Code" or "Header & Footer scripts" app from the Shopify App Store
and paste the same snippet there, set to load on every page.

CHECKS
- The snippet must end up site-wide — theme.liquid covers the storefront
  pages (home, collections, products, cart). Shopify's checkout pages do
  not run theme code, so the widget won't show there.
- Warn me that updating or changing my theme can drop this edit, and that
  I should paste the snippet into theme.liquid again afterwards.
- If my store is Headless or built on Hydrogen, this guide does not apply:
  switch to the codebase loader approach instead.
- Have me purge any caching app or setting before testing.
- My widget key is tied to my account — remind me not to paste it into
  public forums or share it on screen.

FINISH
Have me verify: private window → storefront → floating chat bubble in the
bottom corner → send a test message (it should land in my Lead Inbox).
If no bubble appears: re-check that the key was replaced correctly,
confirm theme.liquid saved, then email help@leadreply.xyz with the store
URL.

Why the prompts mention those specifics

  • Shared layout over single pages — installing once in a template keeps every future page covered automatically.
  • The simplest tag per framework — Next.js's built-in Script component in the root layout, or a plain script tag in index.html for other single-page apps. No custom component is needed.
  • CSP allowances — sites with a strict Content-Security-Policy need leadreply.xyz allowed for scripts, connections and frames. Spam protection runs inside a LeadReply frame, so nothing else needs allowing.
  • Key hygiene — the key routes leads to your inbox, so every prompt makes the assistant ask for it up front and never commit it to a public repo.

After the assistant finishes

  1. Open your live site in a private window.
  2. The floating bubble should appear within a second or two.
  3. Send a test message and check your Lead Inbox for the transcript.

Prefer to do it yourself? The manual guides cover every platform with troubleshooting steps: Installing the widget.

Questions & answers

Ask about this page — the LeadReply team and other readers can answer and upvote.

Log in to ask a question, reply, or upvote. Reading is open to everyone.

Loading discussion…