# đź› technical-support
Donatas
Donatas·12 replies

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?

Sahil | YourGPT
Sahil | YourGPT16/10/2025 14:38

hello @Donatas
Are you seeing any console logs or errors that we can check? Also, please share more details about your app environment — for example, how you’ve integrated or injected the bot.

Donatas
Donatas16/10/2025 15:03

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).

Donatas
Donatas16/10/2025 15:04

Let me know if I can share more information, but at this point I am short on theories 🤷‍♂️

Thivanka
Thivanka16/10/2025 15:54

@Rohit Joshi maybe you can help here too please.

Sahil | YourGPT
Sahil | YourGPT16/10/2025 17:55

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.

Sahil | YourGPT
Sahil | YourGPT17/10/2025 06:33

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;```
Sahil | YourGPT
Sahil | YourGPT17/10/2025 06:34
Donatas
Donatas17/10/2025 07:57

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.

Donatas
Donatas17/10/2025 07:57

As for your previous question about our iOS solution - we have a native SwiftUI app on iOS, so I expect we'll avoid such edge cases on that platform 🤞

Donatas
Donatas17/10/2025 14:30

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

Donatas
Donatas17/10/2025 14:30

@Sahil fyi

Sahil | YourGPT
Sahil | YourGPT18/10/2025 09:36

ok @Donatas
I’ll share this information with our devs to see if it can be handled from the widget side. Thanks

standard1