Hey guys đź‘‹
I'm trying to set up YourGPT chat widget on a React app that is built with Capacitor.js into an Android app. I'm experiencing issues having the chat widget show up on the Android build, even while the chat is opening on the web build. I've followed both NPM Package and $yourgpt Method to no avail
Do you have any past experiences with similar issues and could point me towards a solution?
I've tried a few things, but right now I'm aiming just to get the widget showing up on Android. At the top of the main.tsx I'm setting up YourGPT instance with:
const YOURGPT_WIDGET_ID = import.meta.env.VITE_YOURGPT_WIDGET_ID; console.log('[YourGPT] Initializing widget...'); console.log('[YourGPT] Widget ID:', YOURGPT_WIDGET_ID); console.log('[YourGPT] Domain:', window.location.hostname); if (YOURGPT_WIDGET_ID) { YourGPT.init({ widgetId: YOURGPT_WIDGET_ID, endpoint: 'https://widget.yourgpt.ai', }) .then((sdk) => { console.log('[YourGPT] Widget initialized successfully'); console.log('[YourGPT] SDK:', sdk); console.log('[YourGPT] Opening widget automatically...'); sdk.open(); console.log('[YourGPT] Widget opened'); }) .catch((error) => { console.error('[YourGPT] Initialization failed:', error); console.error('[YourGPT] Error message:', error.message); console.error('[YourGPT] Error stack:', error.stack); }); } else { console.error('[YourGPT] Widget ID not configured'); } ReactDOM.createRoot(document.getElementById(APP_ROOT_ID) as HTMLElement).render( ...
This yields the widget on the web app, as expected on the bottom right corner (first screenshot), however it doesn't show up on Android (second and third screenshots).
hello @Donatas @Thivanka
I’ll share this with our developers to check the setup environment you’re running it in. Are both your Android and iOS apps built using React + Capacitor.js? We’ll also verify if there are any platform-related issues. We do have native Android and iOS packages available as well — let me know if you’d like me to check or share those with you.
hello @Donatas Our developers tested the app on Android using Capacitor.js, and it appears to run as expected — the web view works fine with no visible issues. Could you please try checking it on a blank or empty screen as well? It’s possible that the widget or content is loading behind another element. I’m sharing the code and demo below for your reference. Please take a look and let us know what you find.
import { YourGPT, useYourGPTChatbot } from "@yourgpt/widget-web-sdk/react"; import logo from './logo.svg'; import './App.css'; // Initialize YourGPT YourGPT.init({ widgetId: "your-widget-id", endpoint:"https://widget.yourgpt.ai" }).then(() => { console.log("YourGPT initialized"); }).catch((error) => { console.error("Error initializing YourGPT", error); }); // ChatButton component with YourGPT integration function App() { const chatbot = useYourGPTChatbot(); return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.tsx</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } export default App;```
Interesting, thanks for trying it out so soon 🙌 I'll try a little later today with a blank page, though I have doubts as I would expect that if the issue was about content loading behind an element it would have persisted in the web-app version of the build too. But the fact that it works for your Capacitor.js build does show it's not strictly a Capacitor.js issue.
It seems that the issue is related with CapacitorHttp (https://capacitorjs.com/docs/apis/http) - when enabled in capacitor.config.ts the widget doesn't load. I've found a workaround in our case where our app functions with CapacitorHttp disabled and the widget does indeed load.
I'll proceed testing whether we can roll this version out to production, but you might want to check why does the widget fail with CapacitorHttp enabled