Skip to content

Installing the Widget

This guide explains how to add the Voxum chat widget to your website. The process involves copying a small piece of code and pasting it into your website.

Getting Your Widget Code

  1. Go to Widget in the left menu
  2. Scroll to the Embed Code section
  3. You'll see code that looks like this:
<script src="https://app.voxum.ai/widget.js"
        data-property="your-property-id">
</script>
  1. Click Copy to Clipboard

Widget embed code

Installation by Platform

Choose your website platform below for specific instructions.

WordPress

  1. Go to Appearance → Theme Editor in WordPress admin
  2. Select your active theme
  3. Find and click on footer.php
  4. Paste the widget code just before </body>
  5. Click Update File
  1. Install "Insert Headers and Footers" plugin (or similar)
  2. Go to Settings → Insert Headers and Footers
  3. Paste the widget code in the Footer section
  4. Click Save

Why use a plugin?

Using a plugin keeps your code safe when you update your theme.

Shopify

  1. Go to Online Store → Themes
  2. Click Actions → Edit code on your current theme
  3. In the Layout folder, click theme.liquid
  4. Find </body> near the bottom
  5. Paste the widget code just before </body>
  6. Click Save

Squarespace

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

Note

Code Injection requires a Squarespace Business plan or higher.

Wix

  1. Go to your Wix Editor
  2. Click Add (+) → Embed → Custom Embeds → Embed a Widget
  3. Click Enter Code
  4. Paste the widget code
  5. Position the widget (it will appear at the corner regardless)
  6. Click Apply

Alternatively:

  1. Go to Settings → Custom Code
  2. Click + Add Custom Code
  3. Paste the code
  4. Set location to Body - end
  5. Apply to All pages
  6. Click Apply

Webflow

  1. Go to Project Settings → Custom Code
  2. Paste the widget code in the Footer Code section
  3. Click Save Changes
  4. Publish your site

Custom HTML / Other Platforms

For any platform that lets you edit HTML:

  1. Find your main HTML template or footer file
  2. Locate the closing </body> tag
  3. Paste the widget code immediately before </body>
  4. Save and publish

Example placement:

    <!-- Your page content above -->

    <script src="https://app.voxum.ai/widget.js"
            data-property="your-property-id">
    </script>
</body>
</html>

Verifying Installation

After adding the code:

  1. Visit your website in a new browser tab
  2. Look for the chat bubble in the bottom-right corner
  3. Click on it to open the chat
  4. Type a test message
  5. Verify you receive a response

Widget on website

Showing Widget on Specific Pages

By default, the widget appears on all pages. To show it only on certain pages:

WordPress with Plugin

Use a plugin like "Widget Logic" or configure your header/footer plugin to show code only on specific pages.

Conditional Code (Advanced)

Wrap the widget code in a condition based on your platform's templating language:

WordPress Example:

<?php if (is_page('contact') || is_page('pricing')): ?>
<script src="https://app.voxum.ai/widget.js"
        data-property="your-property-id">
</script>
<?php endif; ?>

Specific Pages Only

If you can edit individual pages, add the widget code only to those pages' custom code sections.

Troubleshooting

Widget doesn't appear

Check these items:

  1. Code placement - Is it before </body>?
  2. Published - Did you save and publish your changes?
  3. Cache - Try clearing your browser cache
  4. Ad blockers - Disable ad blockers temporarily
  5. Console errors - Check browser developer tools for errors

Widget appears but doesn't work

  1. Property ID - Verify your property ID is correct
  2. Domain - Make sure your domain is registered in Voxum
  3. JavaScript - Check for JavaScript errors in the console

Widget in wrong position

The widget is designed to appear in the bottom-right corner. This is intentional and cannot be changed.

Widget overlapping content

If the widget covers important content:

  1. Add padding to your footer: padding-bottom: 80px;
  2. Ensure the widget area is free of critical elements

Multiple widgets appearing

You may have added the code more than once. Search your site for the widget code and remove duplicates.

Need Help?

If you're not comfortable editing your website code:

  1. Copy your widget code from the admin panel
  2. Send it to your web developer or IT team
  3. Tell them: "Please add this code before the closing body tag on our website"

Most developers will know exactly what to do with this instruction.

Testing Across Devices

After installation, test on:

  • [ ] Desktop (Chrome, Firefox, Safari)
  • [ ] Mobile phone
  • [ ] Tablet
  • [ ] Different screen sizes

The widget should work consistently across all devices.

Next Steps