Floating Chat Widget

The Floating Chat Widget is the most popular way to use the Smart AI Contact Form. It places a modern, animated chat bubble in the bottom corner of your website, mimicking the premium feel of expensive SaaS support tools.

Because it "floats" above your content, it acts as a constant, subtle reminder to your visitors that 24/7 support is available.

How to Embed the Widget

To add the floating widget to your website, you only need to paste a single line of code into your HTML.

1. Copy the <script> tag below.
2. Replace https://yourwebsite.com/ with the actual URL where you uploaded the script folder.
3. Paste the code into your website's HTML, ideally right before the closing </body> tag.

<!-- Place this right before your closing </body> tag -->
<script src="[https://yourwebsite.com/widget.js]"></script>

That's it! If you refresh your website, you will see the chat bubble appear in the bottom right corner.

Customizing the Widget Colors

By default, the widget uses a sleek Indigo/Brand color (#4F46E5). However, you will likely want to change this to match your specific brand colors.

Because we built the widget using clean Vanilla Javascript and Tailwind-inspired hex codes, changing the color is incredibly easy.

1. Open the widget.js file in your code editor.
2. Scroll to the very top of the file, or look for the HTML template string.
3. Find the hex code #4F46E5 and replace it with your brand's primary hex color (e.g., #FF0000 for red or #000000 for black).
4. Save the file and upload it back to your server.

💡 Pro Tip: Hard Refresh Browsers love to cache JavaScript files. If you change the color in widget.js but don't see the update on your website, do a "Hard Refresh" (Ctrl + F5 on Windows, or Cmd + Shift + R on Mac) to clear the cache.

Troubleshooting: Z-Index Issues

Sometimes, your website might have a sticky header, a cookie consent banner, or another popup that overlaps the chat widget.

If your widget is hidden behind other elements on your page, you can easily fix this by increasing its z-index.

Open widget.js and look for the main container's CSS styles. You can change z-index: 50; to something much higher, like z-index: 9999;, to ensure the chat widget always stays on top of everything else on your website.