Embedding Your AI Lead Card on Your Website

EMBEDDING YOUR AI LEAD CARD ON YOUR WEBSITE

In addition to your QR code, you can add your AI Lead Card directly to your website. This gives you two ways for customers to find you: physically (QR code on your truck, yard sign, or business card) and digitally (website visitors who never saw a QR code). Both entry points open the exact same lead capture experience.

---

BEFORE YOU START — FIND YOUR LEAD CARD URL

Your Lead Card URL is the same web address your QR code points to. To find it:

1. 1.Log in to your dashboard
2. 2.Go to the QR Code tab
3. 3.You will see your Lead Card URL — it looks like: https://lgsdr.com/card/your-business-id

Copy this URL. You will use it in each of the options below.

---

OPTION 1 — DIRECT LINK OR BUTTON (Simplest)

The easiest option. Create a button or text link on your website that sends visitors to your Lead Card URL when they click it.

Example HTML button you can paste anywhere on your site:

<a href="YOUR_LEAD_CARD_URL" target="_blank" rel="noopener noreferrer"

style="display:inline-block;background:#2563eb;color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:600;padding:14px 24px;border-radius:10px;text-decoration:none;">

Get a Free Quote

</a>

Replace YOUR_LEAD_CARD_URL with your actual Lead Card URL. Change "Get a Free Quote" to any button text that fits your business.

This works on any website — WordPress, Squarespace, Wix, or plain HTML.

---

OPTION 2 — FLOATING CHAT BUTTON (Most Professional)

This adds a floating blue button in the bottom-right corner of every page on your website — similar to a live chat widget. When visitors click it, they go to your AI Lead Card. It looks professional and stays visible as visitors scroll.

Copy and paste this code snippet just before the closing </body> tag on your website:

<script>

(function() {

var LEAD_CARD_URL = 'YOUR_LEAD_CARD_URL';

var btn = document.createElement('a');

btn.href = LEAD_CARD_URL;

btn.target = '_blank';

btn.rel = 'noopener noreferrer';

btn.title = 'Chat with us';

btn.style.cssText = 'position:fixed;bottom:24px;right:24px;z-index:9999;background:#2563eb;color:#ffffff;font-family:sans-serif;font-size:15px;font-weight:600;padding:14px 20px;border-radius:50px;box-shadow:0 4px 20px rgba(37,99,235,0.35);text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap;';

btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>Get a Free Quote';

document.body.appendChild(btn);

})();

</script>

Replace YOUR_LEAD_CARD_URL with your actual Lead Card URL. Change "Get a Free Quote" to any text you like.

WHERE TO ADD THIS CODE ON COMMON PLATFORMS:

WordPress:

Go to Appearance > Theme Editor, open the footer.php file, and paste the code just before </body>. Or use a plugin like "Insert Headers and Footers" — paste the code in the Footer Scripts box and save.

Squarespace:

Go to Settings > Advanced > Code Injection. Paste the code in the Footer section and save.

Wix:

Go to Settings > Custom Code. Click Add Custom Code, paste the code, select "Body — end" for placement, and choose "All Pages." Save.

Plain HTML website:

Open your HTML file in a text editor. Find the closing </body> tag near the bottom and paste the code just above it. Save and upload.

---

OPTION 3 — EMBEDDED IFRAME (Keep Visitors on Your Site)

An iframe embeds your AI Lead Card directly inside a section of your webpage. Visitors see and use the full chat experience without leaving your site.

TECHNICAL NOTE: LGSDR's Lead Card pages are configured to allow iframe embedding from any domain. No additional setup is required on our end.

Paste this HTML wherever you want the Lead Card to appear on your page:

<iframe

src="YOUR_LEAD_CARD_URL"

width="100%"

height="650"

style="border:none;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,0.08);"

title="AI Lead Card"

loading="lazy">

</iframe>

Replace YOUR_LEAD_CARD_URL with your actual Lead Card URL.

Recommended size: 100% width, 600–700px height. On mobile, the iframe will automatically adjust to fit the screen.

WHERE TO ADD THIS CODE:

Use the same platform-specific instructions as Option 2 above. Paste the iframe code in the body of your page where you want it to appear — not in the footer.

---

WHICH OPTION SHOULD I CHOOSE?

Direct link or button — Best if you want the simplest possible setup. Any skill level, any platform.

Floating chat button — Best if you want it to look professional and feel like a real "chat with us" widget. Works on every page automatically.

iFrame embed — Best if you want customers to stay on your website while they fill out the Lead Card. Good for dedicated landing pages or quote pages.

---

FREQUENTLY ASKED QUESTIONS