Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Embed Code References Non-Existent web.js Version 0.3.17, Causing 404 Errors and JavaScript TypeErrors #1855

Closed
ednargocat opened this issue Oct 21, 2024 · 2 comments
Labels
Bug 🐛 Something isn't working

Comments

@ednargocat
Copy link

``When embedding a self-hosted Typebot instance on a website, the generated embed code references a non-existent version of the Typebot JavaScript library (web.js version 0.3.17). This results in 404 errors when attempting to load the script, leading to subsequent JavaScript TypeError issues that prevent the Typebot from functioning correctly.

To Reproduce

Steps to reproduce the behavior:

Set Up Self-Hosted Typebot:

Deploy Typebot on your server following the official Docker deployment instructions.
Ensure that the Typebot services (typebot-builder, typebot-viewer, typebot-db) are running without errors.
Generate Embed Code:

Access the Typebot admin dashboard for your self-hosted instance (e.g., https://bot.yourdomain.com).
Navigate to the section where you can generate the embed code for a specific Typebot (e.g., quiz-abc123).
Use the Embed Code on Your Website:

Insert the provided embed code into your website's HTML where you want the Typebot to appear.
Self-Hosted Embed Code Example:

<script type="module"> import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3.17/dist/web.js'; Typebot.initStandard({ typebot: "quiz-abc123", apiHost: "https://bot.yourdomain.com", }); </script>

Load the Webpage:

Open the webpage where the embed code is placed.
Open the browser's Developer Tools (Press F12 or Ctrl + Shift + I).
Observe Console Errors:

Navigate to the Console tab.
Notice the following errors:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at share-modal.js:1:135
Failed to load resource: the server responded with a status of 404 () https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3.17/dist/web.js

Expected behavior

The embed code should reference a valid and existing version of the Typebot JavaScript library (web.js). Loading the correct script should eliminate the 404 errors and prevent JavaScript TypeError issues, allowing the Typebot to function seamlessly on the website.

Actual behavior

The embed code references web.js version 0.3.17, which does not exist on the CDN (jsDelivr). This results in a 404 error when attempting to load the script:

Failed to load resource: the server responded with a status of 404 () https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3.17/dist/web.js

Subsequently, the missing script leads to a JavaScript error:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at share-modal.js:1:135

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at share-modal.js:1:135
Failed to load resource: the server responded with a status of 404 () https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3.17/dist/web.js

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at share-modal.js:1:135
Failed to load resource: the server responded with a status of 404 () https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3.17/dist/web.js

Environment

Typebot Deployment: Self-hosted using Docker on Ubuntu Server

Additional context

Temporary Fix Implemented:

Changing the web.js version in the embed code from 0.3.17 to 0.3 resolved the immediate issue:
html

<script type="module"> import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js'; Typebot.initStandard({ typebot: "quiz-abc123", apiHost: "https://bot.yourdomain.com", }); </script>


However, the embed code generation still outputs the incorrect version (0.3.17), which could affect future deployments or new embed codes.
CORS Configuration:

Proper CORS settings have been applied to the DigitalOcean Spaces bucket to allow communication between the website and the self-hosted Typebot API.
Docker Containers Status:

All Typebot-related Docker containers are running without errors.
Network Requests:

The web.js script fails to load due to a 404 error, as detailed in the console logs.

@baptisteArno baptisteArno added the Bug 🐛 Something isn't working label Oct 24, 2024
@matheusfols
Copy link

I'm having the same problem

@baptisteArno
Copy link
Owner

Please upgrade to 3.1.0, it should update the embed instructions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug 🐛 Something isn't working
Projects
Status: Deployed 🎉
Development

No branches or pull requests

3 participants