Add Your FormWise CoPilot as a Floating Chat Bubble

Outcome: By the end of this guide you’ll have your AI CoPilot tucked neatly in a chat icon on the bottom‑right of any webpage—ready to answer questions, capture leads, and delight visitors.

Why use the chat‑bubble embed?

• Cleaner UX – keeps the page uncluttered; opens only when clicked.

• Universal – works anywhere you can paste HTML (WordPress, Webflow, Shopify, Squarespace, HighLevel, custom code…).

• Billable – agencies & freelancers can package the bubble as a white‑labeled AI concierge for every client site.

---

Prerequisites

1. A published CoPilot in FormWise.

2. Edit access to the website’s HTML (or an “Embed / Custom Code” block).

---

Step 1 – Grab the CoPilot URL

1. In FormWise → CoPilots open your bot.

2. Click Publish ▸ Share.

3. Ignore the default Embed option—click Copy URL instead (it looks like https://app.formwise.ai/chat/XXXXXXXXXXXX).

Tip: keep that URL handy; we’ll paste it into the code below.

---

Step 2 – Customize the Starter Snippet

Replace the two placeholders:

• COPILOT NAME YOU CAN CHANGE → the label you want on the button (e.g. "Ask Sherpa").

• https://app.formwise.ai/chat/XXXXXXXXXXXX → your CoPilot URL from Step 1.

<!-- Load Montserrat (optional) -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<style>
  *{font-family:'Montserrat',sans-serif}
  #fw-bubble-btn{position:fixed;bottom:20px;right:20px;background:#000321;color:#fff;border:none;border-radius:50px;padding:14px 20px;font-size:14px;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);z-index:1000}
  #fw-bubble-modal{display:none;position:fixed;bottom:80px;right:20px;width:90%;max-width:400px;height:80%;border:none;border-radius:12px;overflow:hidden;z-index:1001;box-shadow:0 4px 20px rgba(0,0,0,.3);background:#fff}
  #fw-bubble-close{position:absolute;top:6px;right:10px;background:none;border:none;color:#fff;font-size:18px;z-index:1002;cursor:pointer}
  @media(max-width:480px){#fw-bubble-modal{bottom:70px;right:10px;width:95%;height:80%}#fw-bubble-btn{padding:12px 16px;font-size:13px}}
</style>
<!-- Button -->
<button id="fw-bubble-btn">💬 COPILOT NAME YOU CAN CHANGE</button>
<!-- Modal -->
<div id="fw-bubble-modal">
  <button id="fw-bubble-close">×</button>
  <iframe src="https://app.formwise.ai/chat/XXXXXXXXXXXX" style="width:100%;height:100%;border:none" allow="clipboard-write" allowfullscreen></iframe>
</div>
<!-- Script -->
<script>
  const btn=document.getElementById('fw-bubble-btn');
  const modal=document.getElementById('fw-bubble-modal');
  const close=document.getElementById('fw-bubble-close');
  btn.onclick=()=>modal.style.display='block';
  close.onclick=()=>modal.style.display='none';
  window.onclick=e=>{if(!modal.contains(e.target)&&e.target!==btn){modal.style.display='none'}};
</script>

Color & brand tweaks – adjust the background value on #fw-bubble-btn, or swap the font if your brand already has one loaded.

---

Step 3 – Paste the Snippet on Your Site

1. Open the page (or global theme/footer) where you want the bubble.

2. Paste the entire code just before </body> for fastest load, or inside any Custom HTML block.

3. Save / publish.

That’s it—refresh the page and click the bubble to test.

---

Step 4 – QA on Desktop & Mobile

• Confirm the bubble shows on every page you added it to.

• Open / close the modal; verify the iframe loads your bot.

• On mobile, tilt to portrait & landscape—modal width should adapt (thanks to the media query).

---

Packaging & Selling to Clients 👔

Value to the Client	How You Monetize
24/7 instant replies & lead capture	One‑time setup fee + monthly hosting/maintenance
Reduced support load via AI FAQ bot	Charge per seat or per 1K messages
Modern site UX → higher conversions	Bundle inside a conversion‑booster retainer

White‑label tip: Swap colors & fonts to match the client’s brand, and host the CoPilot under their sub‑domain for a seamless feel.

---

Troubleshooting

Symptom	Likely Cause	Fix
Bubble doesn’t appear	Code pasted in WYSIWYG that stripped <script> tags	Use “Raw HTML / Code” block or paste in theme footer
Iframe is blank	Wrong URL or bot not published	Republish & copy URL again
Button overlaps chat widgets	Adjust bottom & right values in CSS

---

Next Steps

• Add custom prompts or memory to make the bot feel bespoke.

• Pair with a FormWise SmartForm pop‑up to collect qualified leads after each chat.

• Track usage in CoPilot Analytics to prove ROI to clients.

Need help? Ping us at [email protected], or drop a question in the Community Slack.

Happy building! 🚀