Hi! I’m trying to change the default WebXR Start button since the original doesn’t go well with white background. How can i access the button itself?
I tried changing the css without success.
On the same line, is it possible to do the same with the “open in quicklook” on IOs?
by user 368204675922657280
Hello there – we have an experimental AI bot 
that might be able to help you with your question. Would you like to try this out?
How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.
Help requested: please wait a moment…
Here is what I found for you 
Discord
Hello De! You can customize the WebXR start button by modifying it after it’s created. The WebXR class provides a static method createARButton to create the AR button and resetButtonStyles to reset any styles applied to it.
Here is how you can access the button and apply custom styles in TypeScript:
import { WebXR } from '@needle-tools/engine'; // or your path to WebXR
// After creating the WebXR component and calling createARButton
const xrComponent = new WebXR();
const arButton = WebXR.createARButton(xrComponent);
// You can now modify the arButton styles or attributes as you like
arButton.style.backgroundColor = 'black'; // Example of changing button background color
arButton.style.color = 'white'; // Example of changing button text color
// ...other style changes or attributes
You should apply these changes either in the start method of one of your custom components or after the WebXR component has been instantiated and the AR button has been created.
Regarding the “open in quicklook” button on iOS, the customization approach would be similar. You may modify the button after it has been created, but keep in mind that this button may be specifically styled by the operating system, and you might be limited in what custom styles you can apply. If you need more help with the Quick Look button, please let me know, and I’ll search for more specific information.
Remember to apply changes only after the button has been created to ensure that your styles don’t get overwritten by defaults (see the documentation).
1 messages left GPT 4
thread_Uk9UXaoWC07VxCdRqzLkhvG6
Thanks for your feedback!
Yeap works!
by user 368204675922657280
Changed the channel name: Styling Web XR Button on Android
by user 368204675922657280
You can also take a look at this sample if you need even more customization then just setting the styles:
HTML Custom XR Buttons | Needle Engine?