search

webwhiz-ai / webwhiz

WebWhiz allows you to create an AI chatbot that knows everything about your product and can instantly respond to your customer's queries.
https://www.webwhiz.ai/
GNU Affero General Public License v3.0
882 stars 148 forks source link

Issue with widget and Public link #102

Closed rossman22590 closed 8 months ago

rossman22590 commented 8 months ago

Public Link to Chat Interface Share the chat interface with anyone with the below unique link.

The embeded chat widget works but this and the iframe do not , any ideas? I use docker

rossman22590 commented 8 months ago

im using widget launched with docker

rossman22590 commented 8 months ago

successfully started +2ms webwhiz-main-python_worker-1 | [2023-10-08 23:00:21,637: INFO/MainProcess] mingle: all alone webwhiz-main-python_worker-1 | [2023-10-08 23:00:21,643: INFO/MainProcess] celery@6f779652facd ready. webwhiz-main-widget-1 | 172.23.0.1 - - [08/Oct/2023:23:00:28 +0000] "GET /?kbId=65224bdb47ab506d6bed3c4a&embed=true&hide-chat-actions=true HTTP/1.1" 200 27778 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36" "73.143.175.253" webwhiz-main-widget-1 | 172.23.0.1 - - [08/Oct/2023:23:00:28 +0000] "GET /index.983987c2.css HTTP/1.1" 200 10644 "https://my-botcraft-widget.ngrok.io/?kbId=65224bdb47ab506d6bed3c4a&embed=true&hide-chat-actions=true" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36" "73.143.175.253" webwhiz-main-widget-1 | 172.23.0.1 - - [08/Oct/2023:23:00:28 +0000] "GET /index.983987c2.css.map HTTP/1.1" 200 34158 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36" "73.143.175.253" webwhiz-main-widget-1 | 172.23.0.1 - - [08/Oct/2023:23:00:28 +0000] "GET /favicon.ico HTTP/1.1" 200 27778 "https://my-botcraft-widget.ngrok.io/?kbId=65224bdb47ab506d6bed3c4a&embed=true&hide-chat-actions=true" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36" "73.143.175.253" webwhiz-main-mongodb-1 | {"t":{"$date":"2023-10-08T23:00:31.006+00:00"},"s":"I", "c":"NETWORK", "id":22943, "ctx":"listener","msg":"Connection accepted","attr":{"remote":"172.23.0.6:48510","uuid":{"uuid":{"$uuid":"50420e41-64bf-4858-be60-75b8390275c6"}},"connectionId":7,"connectionCount":7}} webwhiz-main-mongodb-1 | {"t":{"$date":"2023-10-08T23:00:31.006+00:00"},"s":"I", "c":"NETWORK", "id":51800, "ctx":"conn7","msg":"client metadata","attr":{"remote":"172.23.0.6:48510","client":"conn7","doc":{"driver":{"name":"nodejs","version":"5.1.0"},"os":{"type":"Linux","name":"linux","architecture":"x64","version":"5.15.90.1-microsoft-standard-WSL2"},"platform":"Node.js v18.18.0, LE (unified)|Node.js v18.18.0, LE (unified)"}}} webwhiz-main-mongodb-1 | {"t":{"$date":"2023-10-08T23:00:31.465+00:00"},"s":"I", "c":"NETWORK", "id":22943, "ctx":"listener","msg":"Connection accepted","attr":{"remote":"172.23.0.5:60672","uuid":{"uuid":{"$uuid":"99134608-4d79-4353-bae0-94f274a85d27"}},"connectionId":8,"connectionCount":8}} webwhiz-main-mongodb-1 | {"t":{"$date":"2023-10-08T23:00:31.465+00:00"},"s":"I", "c":"NETWORK", "id":51800, "ctx":"conn8","msg":"client metadata","attr":{"remote":"172.23.0.5:60672","client":"conn8","doc":{"driver":{"name":"nodejs","version":"5.1.0"},"os":{"type":"Linux","name":"linux","architecture":"x64","version":"5.15.90.1-microsoft-standard-WSL2"},"platform":"Node.js v18.18.0, LE (unified)|Node.js v18.18.0, LE (unified)"}}} webwhiz-main-widget-1 | 172.23.0.1 - - [08/Oct/2023:23:01:46 +0000] "GET /?kbId=65224bdb47ab506d6bed3c4a&embed=true&hide-chat-actions=true HTTP/1.1" 304 0 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36" "73.143.175.253"

rossman22590 commented 8 months ago

any ideas?

sachinchoolur commented 8 months ago

Hi @rossman22590,

It looks like your ngrok is down. Could you please provide a working URL to debug the issue?

rossman22590 commented 8 months ago

Ok I put it back online for you to see

rossman22590 commented 8 months ago

https://my-botcraft-beta.ngrok.io/

sachinchoolur commented 8 months ago

Have you modified the widget source code? There is a space after the base URL in the chat_widget_data API

CleanShot 2023-10-17 at 08 18 32@2x

rossman22590 commented 8 months ago

var WEBWHIZURL = WEBWHIZgetWidgetURL();

function WEBWHIZready(fn) { if (document.readyState !== "loading") { fn(); return; } document.addEventListener("DOMContentLoaded", fn); }

const widgetStyle = ` .webwhiz-widget { position: fixed; z-index: 9999999; max-height: calc(100% - 30px); right: 20px; bottom: 20px; min-width: 80px; height: 80px; width: 80px; max-width: calc(100% - 40px); } .webwhiz-widget.wb-align-left { left: 0; right: auto; } .webwhiz-widget.wb-expand { width: 416px; height: 610px; min-width: 370px; } .webwhiz-widget.wb-maximize { width: 50%; height: calc(100% - 30px) } @media only screen and (device-width: 768px), only screen and (max-width: 768px){ .webwhiz-widget.wb-maximize { width: 100%; height: 100%; } .webwhiz-widget { right: 0; bottom: 0; } .webwhiz-widget.wb-expand { width: 100%; height: 100%; min-width: 0; left: 0; right: 10px; bottom: 10px; top: 0; max-width: 100%; max-height: 100%; } } .webwhizmsg-popup { position: fixed; bottom: 106px; max-width: fit-content; display: flex; flex-direction: column; max-width: 320px; opacity: 0; align-items: end; transition: all 0.3s ease-in-out; transform: translate3d(0px, 10px, 0px); } .webwhizmsg-popup.webwhizmsg-popup-left { left: 20px; } .webwhizmsg-popup.webwhizmsg-popup-right { right: 20px; } .webwhizmsg-popup.webwhiz__msg-popup--show { opacity: 1; transform: translate3d(0px, 0px, 0px); }

.webwhizmsg-popup-item { padding: 20px; background-color: #FFF; display: inline-flex; width: auto; margin: 5px 0; font-size: 14px; border-radius: 6px; line-height: 1.5; color: #333; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } .webwhizmsg-popup-close-btn { cursor: pointer; border-radius: 12px; background-color: #fff; font-size: 12px; color: rgba(0,0,0,0.65); border: 1px solid rgba(0,0,0,0.18); opacity: 0; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; position: relative; transition: opacity 0.3s ease-in-out; }

.webwhiz__msg-popup-close-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.webwhizmsg-popup:hover .webwhizmsg-popup-close-btn { opacity: 0.8; } .webwhizmsg-popup .webwhizmsg-popup-close-btn:hover { opacity: 1; } `

function WEBWHIZaddIframe() { var ifrm = document.createElement("iframe"); const kbId = WEBWHIZgetChatbotId(); ifrm.setAttribute("class", "webwhiz-widget"); ifrm.setAttribute("id", "webwhiz-widget"); ifrm.setAttribute("data-powered-by", "https://www.webwhiz.ai/"); ifrm.setAttribute("frameborder", "0");

const scriptEl = document.getElementById("webwhizSdk"); const container = scriptEl.getAttribute('container') || scriptEl.getAttribute('data-container');

if (container) { const $container = document.querySelector(container); if ($container) { $container.appendChild(ifrm); } } else { var styleSheet = document.createElement('style'); styleSheet.innerText = widgetStyle; document.head.appendChild(styleSheet); document.body.appendChild(ifrm); }

const baseUrl = WEBWHIZgetBaseURL(); ifrm.setAttribute("src", WEBWHIZURL + '?kbId=' + kbId +'&baseUrl=' + baseUrl); return ifrm; }

function addPopup(config) { const welcomeMessagesHTML = config.welcomeMessages.map(msg => { return <div class="webwhiz__msg-popup-item">${msg}</div> }).join(''); const closeBtn = ` let popupPositionClass = '' if(config.position === 'left') { popupPositionClass = 'webwhiz__msg-popup-left' } else { popupPositionClass = 'webwhiz__msg-popup-right' } document.body.insertAdjacentHTML('beforeend',

${closeBtn}${welcomeMessagesHTML}
`); document.getElementById('webwhizmsg-popup-close-btn').onclick = () => { removePopup(); } setTimeout(() => { const popup = document.getElementById('webwhizmsg-popup'); if(popup) { popup.classList.add('webwhiz__msg-popup--show'); } }, config.popupDelay || 3000); }

function removePopup() { const popup = document.getElementById('webwhizmsg-popup'); if(popup) { popup.classList.remove('webwhizmsg-popup--show'); localStorage.setItem("webwhiz__popupRemoved", 'true'); setTimeout(() => { popup.remove(); }, 350); } }

function WEBWHIZgetEventHandler(ifrm) { const iframe = document.getElementById("webwhiz-widget"); const scriptEl = document.getElementById("webwhizSdk"); const container = scriptEl.getAttribute('container') || scriptEl.getAttribute('data-container'); function webWhizEventHandler(e) { if (e.data === "webwhiz:widget_expand") { iframe.classList.add("wb-expand"); removePopup(); } else if (e.data === "webwhiz:widget_collapse") { setTimeout(() => { iframe.classList.remove("wb-expand", "wb-maximize"); }, 350); } else if (e.data === "webwhiz:widget_maximize") { iframe.classList.add("wb-maximize"); } else if (e.data === "webwhiz:widget_minimize") { iframe.classList.remove("wb-maximize"); } else if (e.data && e.data.messageType === 'webwhiz:widget_config') { const config = e.data.config || {}; if (config.position === 'left'){ iframe.classList.add("wb-align-left"); } const popupRemoved = localStorage.getItem("webwhizpopupRemoved"); if(!popupRemoved && config.showAsPopup && config.welcomeMessages && config.welcomeMessages.length > 0 && !container) { addPopup(config); } } else if (e.data === "webwhiz:widget_clear_history") { localStorage.removeItem('chatHistory'); localStorage.removeItem('sessionId'); e.source.postMessage({ messageType: 'webwhiz:recieve_session_id', sessionId: '' }, '*'); } else if (e.data === "webwhiz:request_meta_data") { const scriptEl = document.getElementById("webwhizSdk__"); const container = scriptEl.getAttribute('container') || scriptEl.getAttribute('data-container'); e.source.postMessage({ messageType: 'webwhiz:recieve_meta_data', url: window.location.href, container: container }, ''); } else if (e.data === "webwhiz:request_chat_data") { const chatHistoryData = localStorage.getItem("chatHistory"); const chatHistory = JSON.parse(chatHistoryData || '[]'); e.source.postMessage({ messageType: 'webwhiz:recieve_chat_data', chatHistory: chatHistory }, ''); } else if (e.data === "webwhiz:request_session_id") { const sessionId = localStorage.getItem("sessionId"); e.source.postMessage({ messageType: 'webwhiz:recieve_session_id', sessionId: sessionId }, '*'); } else if(e.data && e.data.messageType === 'webwhiz:recieve_new_message') { const chatHistoryData = localStorage.getItem("chatHistory"); let chatHistory = JSON.parse(chatHistoryData || '[]'); const msg = e.data.message || [] chatHistory = [...chatHistory, ...msg]; localStorage.setItem("chatHistory", JSON.stringify(chatHistory)); } else if(e.data && e.data.messageType === 'webwhiz:recieve_new_session_id') { localStorage.setItem("sessionId", e.data.sessionId); } }

return webWhizEventHandler; }

function WEBWHIZaddEventListeners(ifrm) { window.onmessage = WEBWHIZgetEventHandler(ifrm); }

function WEBWHIZgetChatbotId() { const scriptEl = document.getElementById("webwhizSdk"); const chatbotId = scriptEl.getAttribute('chatbotId') || scriptEl.getAttribute('data-chatbot-id'); return chatbotId; }

function WEBWHIZgetWidgetURL() { const scriptEl = document.getElementById("webwhizSdk"); const baseURL = scriptEl.getAttribute('widgetUrl') || scriptEl.getAttribute('data-widget-url'); return baseURL || 'https://my-botcraft-widget.ngrok.io'; }

function WEBWHIZgetBaseURL() { const scriptEl = document.getElementById("webwhizSdk"); const baseURL = scriptEl.getAttribute('baseUrl') || scriptEl.getAttribute('data-base-url'); console.log(baseURL); return baseURL || 'https://my-bocraft-pro.ngrok.io'; }

WEBWHIZready(() => { setTimeout(() => { var ifrm = WEBWHIZaddIframe(); WEBWHIZaddEventListeners(ifrm); }, 1000); });

rossman22590 commented 8 months ago

no space here is ENV

REACT_APP_BASE_URL='https://my-bocraft-pro.ngrok.io'

rossman22590 commented 8 months ago

i see issue here but no clue where it coming from https://my-botcraft-widget.ngrok.io/?kbId=652249a7d2cef2bcdc0676da&embed=true&hide-chat-actions=true

rossman22590 commented 8 months ago

any update on this?

rossman22590 commented 8 months ago

would love to use for my website, but cannot get that feature to work, let me know how i can help solve this - service is up and i showed u env

sachinchoolur commented 8 months ago

In the widget HTML file, there is an unwanted space.

Go to the view source and search for "https://my-bocraft-pro.ngrok.io "

To fix the issue, you can simply pass the baseUrl via query param. Below is the working link

https://my-botcraft-widget.ngrok.io/?kbId=652249a7d2cef2bcdc0676da&embed=true&hide-chat-actions=true&baseUrl=https://my-bocraft-pro.ngrok.io

rossman22590 commented 8 months ago

thanks! worked