Skip to main content

​
Overview

Add your Invent AI assistant to any Weebly website with a floating bubble. Perfect for small businesses, portfolios, and online stores built on Weebly.

​
Installation

1

Open Weebly Editor

Log in to your Weebly account and open your site in the Weebly Editor.
2

Access Settings

Click Settings in the top left corner, then select SEO from the sidebar.
3

Add to Footer Code

Scroll down to Footer Code section and paste this code:
<invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/bubble.js" async defer></script>
Replace YOUR_ASSISTANT_ID with your actual assistant ID from the Invent dashboard.
4

Save and Publish

Click Save at the top, then Publish your site. The bubble will now appear on all pages.

​
Alternative Method: Embed Element

For more control over placement, you can use Weebly’s Embed Code element:
1

Add Embed Element

In the Weebly editor, drag the Embed Code element from the Basic section to your desired location.
2

Click Edit Custom HTML

Click on the element and select Edit Custom HTML.
3

Add the Code

Paste the assistant code:
<invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/bubble.js" async defer></script>
4

Publish

The bubble will appear on pages where you’ve added the embed element.

​
Customization

​
Match Your Weebly Theme

<invent-assistant
  assistant-id="YOUR_ASSISTANT_ID"
  theme-appearance="auto"
  theme-button-background-color="#2C7EBD"
  theme-button-color="#FFFFFF"
/>
<script type="text/javascript" src="https://www.useinvent.com/bubble.js" async defer></script>

​
Show on Specific Pages Only

Instead of adding to Footer Code (all pages), use the Embed Element method and add it only to specific pages where you want the assistant to appear.

​
Weebly eCommerce Integration

For Weebly stores, the assistant can help customers with:
  • Product questions and recommendations
  • Shipping and delivery information
  • Order status inquiries
  • Return and refund policies
  • Size guides and product details
The assistant will automatically appear on all store pages when added to Footer Code.

​
User Authentication

Security Requirement: When using any user-* attributes (user-id, user-name), you must also provide user-hash. Both user-id and user-hash must be provided together, or neither should be provided. The user-hash must be generated on your backend using HMAC-SHA256 with your assistant’s secret key. Never expose the secret key to the client.
Weebly does not provide built-in server-side scripting for hash generation. For sites requiring user authentication, you’ll need to use an external service (such as a serverless function) to generate the hash securely. For most Weebly sites, use the basic implementation without authentication: 
<!-- Basic implementation without authentication -->
<invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/button.js" async defer></script>
See the Bubble Integration guide for hash generation examples that you can deploy as serverless functions.

​
Tips for Weebly

All Themes

Works with all Weebly themes and templates

Mobile Optimized

Automatically adapts to mobile layouts

eCommerce Ready

Perfect for Weebly stores and product support

No Coding Required

Simple copy-paste installation

​
Weebly Plan Requirements

The Footer Code feature requires a Weebly Pro, Business, or Performance plan. Free Weebly sites can use the Embed Element method instead.

​
Troubleshooting

Solutions:
  • Verify you have a Pro, Business, or Performance plan for Footer Code
  • Check that code is in Footer Code section, not Header Code
  • Clear browser cache and hard refresh (Cmd+Shift+R or Ctrl+Shift+R)
  • Verify assistant ID is correct
  • Try using Embed Element method instead
Solutions:
  • Check if code is added in both Footer Code and Embed Elements
  • Remove duplicate code from either location
  • Only use one installation method
Solutions:
  • Test on actual mobile device, not just browser resize
  • Check that code is in Footer Code (applies to all devices)
  • Clear mobile browser cache
  • Verify site is published after changes
Solutions:
  • Check z-index if bubble is hidden behind elements
  • Adjust bubble position if needed
  • Ensure no other chat widgets are installed
  • Try different theme if conflicts persist

​
Weebly App Center

Currently, Invent is not available as a native Weebly App. Use the manual code installation method described above. We’re working on creating an official Weebly App for easier installation.

​
Advanced: Custom Positioning

If you need to adjust the bubble position, add custom CSS: 
<invent-assistant assistant-id="YOUR_ASSISTANT_ID" />
<script type="text/javascript" src="https://www.useinvent.com/bubble.js" async defer></script>

<style>
  invent-assistant {
    /* Adjust position if needed */
    --bubble-bottom: 20px;
    --bubble-right: 20px;
  }
</style>

​
Best Practices

  • Add to Footer Code for site-wide availability
  • Use Embed Element for page-specific installation
  • Test on both desktop and mobile devices
  • Customize colors to match your brand
  • Monitor visitor interactions in Invent dashboard

​
Small Business Website

Help visitors find information about services, hours, pricing, and contact details.

​
Online Store

Assist customers with product selection, shipping questions, and order support.

​
Portfolio Site

Answer questions about your work, availability, and booking inquiries.

​
Restaurant Website

Help customers with menu questions, reservations, and delivery options. Looking for other website builder integrations?