Custom QR code button

🌵 Needle Engine
1

I would like to show a QR code with a custom button inside my Needle app created in Unity. Is that possible, and also to remove url underneath the QR code. So I can choose how the button will look.

Thanks

2

Hi Tomislav Štefan, yes – it’s definitely possible to use a custom QR code button in your Needle Engine Unity app and to remove the URL that normally appears underneath the QR code.

Needle Engine provides a built‐in way to generate and style QR code buttons via the ButtonsFactory. For example, the ButtonsFactory’s createQRCode() method creates a QR code button that, by default, renders the QR code (often accompanied by the URL). If you want to remove the URL from underneath the QR code, you can take advantage of the options of the underlying generateQRCode function. Its options include a showUrl flag so that if you set showUrl to false the URL text will not be rendered (see at engine_utils.d.ts.md).

One approach is to bypass the default button if you want a completely custom look. You could create your own HTML button (or Unity UI element) and, on its click event, call generateQRCode with your custom options. For example:

import { generateQRCode } from "@needle-tools/engine";

async function showCustomQRCode() {
  const qrCodeElement = await generateQRCode({
    text: window.location.href,  // or your custom URL/text
    width: 200,
    height: 200,
    colorDark: "#000000",
    colorLight: "#ffffff",
    showUrl: false, // This disables showing the URL underneath the QR code
    showLogo: true  // Optional: shows Needle’s logo
  });
  // Append the generated QR code to your custom button or container:
  document.querySelector("#qrContainer")?.appendChild(qrCodeElement);
}

document.querySelector("#customQRButton")?.addEventListener("click", showCustomQRCode);

With this setup you fully control the button’s look (by styling your custom element with CSS or using a custom Unity UI prefab) while using the QR code generation utility from Needle Engine. Additionally, if you prefer using the built-in button via the ButtonsFactory, you can override its default URL (or even potentially hide it) by modifying its properties—for example, setting ButtonsFactory.instance.qrButtonUrl to your desired URL as noted in our changelog (see at CHANGELOG.md).

This way you have full flexibility over both the appearance of the button and the behavior (i.e. not showing the URL text underneath) while still leveraging the Needle Engine’s QR code generation functionality.

Hope that helps! Let me know if you need any further details.

4 replies left
thread_LMZyduSvMIE2lOCj6Uq3BWhk
Reply to this post directly if you need further help (bottom right button)

3

Hello @Tomislav_Stefan the bot reply looks correct to me, it’s roughly what I would suggest too :slight_smile:

Relevant links:

5

Is that what you were looking for / did it help?

6

Yes, that was it,

One more question, does Needle support Unity ScrollView

7

Unity ScrollView is not supported

8

And ContentSizeFitter is also not supported?

Also, how can I change the Text size in code?

Is it possible to change The Image color with code?