Troubleshooting

Common issues and solutions when using VueBot.

Widget Not Appearing

If the widget doesn't appear, check the following:

  • Ensure the CSS file is loaded before the JavaScript
  • Check browser console for errors
  • Verify your API key is correct
  • Make sure the script is loaded after the DOM is ready

Styles Not Loading

If styles aren't applied:

// Make sure to import CSS in React/Next.js
import '@vuedapt/vuebot/dist/vuebot-widget.css';

// Or include in HTML
<link rel="stylesheet" href="https://unpkg.com/@vuedapt/vuebot@latest/dist/vuebot-widget.css">

API Key Errors

If you're getting API key errors:

  • Verify your API key is correct and starts with vb_
  • Check that your API key is active in the VueBot dashboard
  • Ensure you're using the correct apiBaseUrl

CORS Issues

If you encounter CORS errors, ensure your API key has the correct domain whitelist configured in the VueBot dashboard.

React/Next.js Issues

For Next.js, make sure to use 'use client' directive:

'use client';

import VueBotWidget from '@vuedapt/vuebot';
import '@vuedapt/vuebot/dist/vuebot-widget.css';

Still Having Issues?

If you're still experiencing problems, please check the browser console for error messages and ensure all dependencies are correctly installed.