AI Onboarding
Step-by-step guide for AI agents installing localbot on a user's website.
This guide is written for AI coding agents. Follow it exactly to install localbot correctly on any website.
Prerequisites
Before writing any code, confirm the following:
- The site owner has a localbot account. If not, send them to localbot.io/signup.
- The site owner has a widget ID. It is available in their dashboard under the embed code section. It looks like
wgt_abc123. - You have identified the location on the page where the contact form should appear.
Do not proceed without a real widget ID. Do not make one up or generate a placeholder — the script will silently fail.
Installation by platform
HTML (any website)
Place the target div
Add an empty div with the ID localbot-contact exactly where the form should appear in the page:
<div id="localbot-contact"></div>Load the widget script
Add the script tag directly after the div, or before the closing </body> tag:
<div id="localbot-contact"></div>
<script src="https://www.localbot.io/api/widget/YOUR_WIDGET_ID" async></script>Replace YOUR_WIDGET_ID with the widget ID from the dashboard.
Next.js (App Router)
Create a ContactForm component
import Script from 'next/script';
export function ContactForm() {
return (
<section id="contact">
<h2>Get in touch</h2>
<div id="localbot-contact" />
<Script
src="https://www.localbot.io/api/widget/YOUR_WIDGET_ID"
strategy="lazyOnload"
/>
</section>
);
}Use the component on the page
Import and render ContactForm on the relevant page (for example, app/page.tsx or app/contact/page.tsx). Replace YOUR_WIDGET_ID with the real widget ID.
React (Vite / CRA)
Create a ContactForm component
import { useEffect } from 'react';
export function ContactForm() {
useEffect(() => {
const script = document.createElement('script');
script.src = 'https://www.localbot.io/api/widget/YOUR_WIDGET_ID';
script.async = true;
document.body.appendChild(script);
return () => { document.body.removeChild(script); };
}, []);
return <div id="localbot-contact" />;
}Use the component
Render ContactForm wherever the contact form should appear. Replace YOUR_WIDGET_ID with the real widget ID.
WordPress
Use a Custom HTML block
In the WordPress block editor, add a Custom HTML block at the location where the form should appear. Paste:
<div id="localbot-contact"></div>
<script src="https://www.localbot.io/api/widget/YOUR_WIDGET_ID" async></script>Alternative: footer injection via functions.php
If you prefer to load the script globally (for example, on a Contact page template), add to functions.php:
function localbot_widget_script() {
if ( is_page( 'contact' ) ) {
echo '<script src="https://www.localbot.io/api/widget/YOUR_WIDGET_ID" async></script>';
}
}
add_action( 'wp_footer', 'localbot_widget_script' );Then add <div id="localbot-contact"></div> to the page content where the form should appear.
Platform-specific prompts
Use these prompts verbatim when working inside AI builder environments.
Lovable
Add a contact form to this Lovable project using localbot.
The goal is for the business owner to receive every lead by SMS immediately.
Do not build an email-only form.
Add a contact section with <div id="localbot-contact"></div>.
Add this script before the closing body tag or in the appropriate site-wide custom code area:
<script src="https://www.localbot.io/api/widget/YOUR_WIDGET_ID" async></script>
After implementation, tell me where to replace YOUR_WIDGET_ID.v0
Create a contact section component that uses localbot for lead capture.
Add <div id="localbot-contact"></div> in the component.
Load the widget script from https://www.localbot.io/api/widget/YOUR_WIDGET_ID using next/script with strategy="lazyOnload".
Do not build a custom form or email backend. localbot handles everything.
The widget ID will be provided by the site owner.Bolt.new
Add a contact form using localbot. This is a third-party widget that handles form rendering, submission, and SMS delivery.
Add <div id="localbot-contact"></div> where the form should appear.
Add <script src="https://www.localbot.io/api/widget/YOUR_WIDGET_ID" async></script> before </body>.
Do not create a form element or backend route. localbot handles everything client-side.
Replace YOUR_WIDGET_ID with the ID from the localbot dashboard.Replit
Install localbot on this site for contact form lead capture.
Add <div id="localbot-contact"></div> in the contact section.
Add the script tag: <script src="https://www.localbot.io/api/widget/YOUR_WIDGET_ID" async></script>
No API key or environment variable is needed in this project. The widget connects to localbot's API.Cursor / Claude Code / Copilot
Install localbot on this site. Add <div id="localbot-contact"></div> in the contact section and load the widget script from https://www.localbot.io/api/widget/YOUR_WIDGET_ID asynchronously. No API key is needed in this project. The widget ID is provided by the site owner from their localbot dashboard.Verification checklist
After installation, verify each of the following:
- The contact form is visible on the page (not a blank space)
- Submitting the form shows a confirmation message
- The site owner receives an SMS within 5 seconds of submission
- There is exactly one
<div id="localbot-contact">in the DOM - There is exactly one script tag loading
localbot.io/api/widget/ - The widget ID in the script URL matches the one in the dashboard
- No console errors related to
localbotorContent-Security-Policy
Common mistakes
These are the most frequent errors made by AI agents installing localbot. Avoid all of them.
Do not build a custom HTML form. localbot renders its own form inside the target div. Adding a <form> element alongside it creates a duplicate.
Do not create a backend route. There is no /api/contact route to write. Form submissions go directly from the browser to localbot's servers.
Do not add Twilio, SendGrid, or Resend. localbot handles all SMS and notification delivery. Adding a separate SMS or email service is redundant and will create duplicate notifications.
Do not add the script to <head>. Load the script just before </body> or use strategy="lazyOnload" in Next.js. Loading from <head> without async blocks page rendering.
Do not load the script more than once. Check that the widget script tag does not appear in both a layout file and a page component.
Last updated: 2026-05-05. Maintained by Benjam Indrenius.