Skip to main content

Web Implementation Guide

Step-by-step instructions for implementing your AI assistant widget across different website platforms and content management systems.

Understanding the Widget Code​

Your generated widget code consists of two main components that work together:

Widget Container​

<div 
  id="your-unique-widget-id" 
  data-config-id="YOUR_CONFIG_ID" 
  data-primary-color="#ff6b35" 
  data-agent-name="Customer Support" 
  data-features="chat,voice" 
  data-prompt-message="Need help? We're here to assist!" 
></div>

Widget Script​

<script src="https://cdn.wiil.io/public/wiil-widget.js"></script>
<script>WiilWidget.init();</script>

Important: Always copy and paste your exact generated code. The placeholders shown above are for reference only.

Website Builders Implementation​

WordPress​

Method 1: Theme Footer (Recommended)

  1. Go to Appearance → Theme Editor
  2. Select footer.php from the file list
  3. Paste your widget code before the closing body tag
  4. Click Update File

Method 2: Custom HTML Widget

  1. Go to Appearance → Widgets
  2. Add a Custom HTML widget to your desired location
  3. Paste your complete widget code
  4. Save the widget

Method 3: Plugin (Alternative)

  1. Install a "Header and Footer Scripts" plugin
  2. Go to plugin settings
  3. Paste your widget code in the "Footer Scripts" section
  4. Save settings

Wix​

Using Custom Code:

  1. Go to Settings → Custom Code
  2. Click + Add Custom Code
  3. Paste your widget code
  4. Set Load code on: "All Pages" or specific pages
  5. Choose Place code in: "Body - end"
  6. Click Apply

Using HTML Embed:

  1. Click Add Elements → Embed → Custom Embeds
  2. Select HTML Embed
  3. Click Enter Code
  4. Paste your complete widget code
  5. Position the embed element where desired

Squarespace​

Code Injection Method:

  1. Go to Settings → Advanced → Code Injection
  2. Paste your widget code in the Footer section
  3. Click Save

Code Block Method:

  1. Edit the page where you want the widget
  2. Add a Code Block
  3. Paste your widget code
  4. Save and publish

Webflow​

Project-Wide Implementation:

  1. Go to Project Settings → Custom Code
  2. Paste your widget code in Footer Code
  3. Click Save Changes and publish

Page-Specific Implementation:

  1. Open the page in the Designer
  2. Go to Page Settings → Custom Code
  3. Paste your widget code in Before body end tag
  4. Save and publish

E-commerce Platforms​

Shopify​

Theme Files Method:

  1. Go to Online Store → Themes
  2. Click Actions → Edit Code
  3. Open Layout/theme.liquid
  4. Paste your widget code before </body>
  5. Click Save

Alternative - Checkout Settings:

  1. Go to Settings → Checkout
  2. Scroll to Order Status Page
  3. Paste widget code in Additional Scripts
  4. Save settings

BigCommerce​

Script Manager:

  1. Go to Storefront → Script Manager
  2. Click Create a Script
  3. Set Location to "Footer"
  4. Set Pages to "All Pages" or specific pages
  5. Paste your widget code in the script content
  6. Save script

WooCommerce (WordPress)​

Follow the WordPress implementation methods above, as WooCommerce runs on WordPress.

No-Code Development Platforms​

Lovable​

Custom Code Section:

  1. Access your project's custom code settings
  2. Add your widget code to the HTML embed component
  3. Position the component in your desired location
  4. Save and deploy

Replit​

HTML Integration:

  1. Open your project's main HTML file
  2. Paste the widget code before the closing body tag
  3. Save the file
  4. Run your project to test

Base44​

Custom HTML Section:

  1. Navigate to your generated app's custom HTML section
  2. Add your widget code to the footer or body area
  3. Save changes
  4. Deploy your application

Bubble​

HTML Element:

  1. Add an HTML Element to your page
  2. Paste your complete widget code
  3. Position the element where desired
  4. Set element to be visible
  5. Preview and publish

Glide​

Web Embed Feature:

  1. Add a Web Embed component to your app
  2. Paste your widget code
  3. Configure display settings
  4. Publish your app

FlutterFlow​

Custom Widget:

  1. Add a Custom Widget component
  2. Include your widget code in the web view component
  3. Configure the widget properties
  4. Build and deploy

Zapier​

Webhook Integration:

  1. Set up a webhook in your automation
  2. Add your widget code to the webhook response
  3. Configure the automation trigger
  4. Test and activate

Advanced Implementation Options​

Custom Styling Integration​

Your widget supports customization through data attributes:

<div 
  id="your-unique-widget-id" 
  data-config-id="YOUR_CONFIG_ID" 
  data-primary-color="#your-brand-color" 
  data-agent-name="Your Assistant Name" 
  data-features="chat,voice" 
  data-prompt-message="Your custom message" 
></div>

Customizable Attributes:

  • data-primary-color: Widget theme color (hex code)
  • data-agent-name: Display name for your assistant
  • data-features: Communication options ("chat", "voice", or "chat,voice")
  • data-prompt-message: Welcome message for users

Multiple Page Implementation​

Site-Wide (Recommended):

  • Place code in footer/header templates
  • Widget appears on all pages
  • Consistent user experience

Page-Specific:

  • Add code to individual pages
  • Targeted assistance for specific content
  • More granular control

Performance Considerations​

Loading Optimization:

  • Widget script loads asynchronously
  • Minimal impact on page load speed
  • Initializes after page content loads

Mobile Responsiveness:

  • Widget automatically adapts to screen size
  • Touch-friendly interface on mobile devices
  • Voice features work on supported mobile browsers

Testing Your Implementation​

Verification Steps​

  1. Check Widget Visibility:

    • Widget appears on intended pages
    • Positioning looks correct
    • No layout conflicts

  2. Test Communication Features:

    • Text chat functionality works
    • Voice features activate (if enabled)
    • Assistant responds appropriately

  3. Cross-Browser Testing:

    • Test in Chrome, Firefox, Safari, Edge
    • Verify mobile browser compatibility
    • Check voice features in supported browsers

  4. Performance Testing:

    • Page load speed not significantly impacted
    • Widget loads without errors
    • No console errors in browser

Common Testing Scenarios​

Desktop Testing:

  • Text chat conversations
  • Voice activation and recognition
  • Widget positioning and appearance

Mobile Testing:

  • Touch interface responsiveness
  • Voice features on mobile browsers
  • Screen size adaptation

Different User Flows:

  • New visitor experience
  • Returning user recognition
  • Conversation continuity

Best Practices​

Implementation Guidelines​

  1. Test on Staging First:

    • Always test on a staging/development site
    • Verify functionality before production deployment
    • Check for conflicts with existing scripts

  2. Monitor Performance:

    • Check page load speeds after implementation
    • Monitor for any JavaScript errors
    • Ensure widget doesn't interfere with other features

  3. User Experience:

    • Position widget for easy access
    • Ensure it doesn't block important content
    • Test on different screen sizes

  4. Documentation:

    • Record implementation details for team reference
    • Document any customizations made
    • Keep track of widget configuration settings

Maintenance Considerations​

Regular Checks:

  • Verify widget continues to function properly
  • Monitor for any platform updates that might affect integration
  • Test across different browsers periodically

Updates and Changes:

  • Widget script automatically updates from CDN
  • Configuration changes made in dashboard reflect immediately
  • No need to manually update embedded code

Need Help? If you encounter issues with platform-specific implementation, contact our support team at support@wiil.io with your platform details and specific questions.