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! 🚀

PreviousGUIDE: Turning Responses Into PDFsNextUse Case Examples

Last updated

Was this helpful?