QR Code Shareables

Install this theme component

Adds a QR Code to sources for shareable links. Includes settings for adjusting the style of the QR code.

Screenshots

Settings

Name Description
share_in_private Allows QR Codes in private contexts (login required sites and private messages).
dots_color Color of the dots in the QR code.
dots_type Type of dots used in the QR code.
Options: rounded, dots, classy, classy-rounded, square, extra-rounded
corners_square_color Color of the square corners in the QR code.
corners_square_type Type of square corners in the QR code.
Options: dots, square, extra-rounded
corners_dots_type Type of dots used in the corners of the QR code.
Options: dot, square
background_color Background color of the QR code.
image Image to be embedded in the QR code. If none is provided, QR code will be generated normally without an image
image_hide_background_dots Background dots should be hidden behind the image.
image_margin Margin around the embedded image in the QR code. In px
image_size Size of the embedded image relative to the QR code. This is a ratio from 0 to 1

Notes

After reading some feature requests (Create a QR code for invites and Possible to share a post by save a picture with a QR code?), I loved the idea of adding QR codes to shareable links. Currently this only covers sharing topics and posts, since the create invite modal doesn’t have any plugin outlets or use the Sharing API.

This uses the qr-code-styling - npm package for customizing the QR code.

15 Likes

How should that be shared? I’m used to use QR only from print medias :man_shrugging:

3 Likes

This is useful in scenarios where the people you want to share the topic with is able to see your screen (i.e. quickly show the QR code on mobile). You can save the QR code, since it’s a HTML canvas element, by right clicking and saving to image.

4 Likes

Saving, or copying, doesn’t work on iPad.

1 Like

Agh, I knew I was forgetting something leaving it in HTML canvas. I’ve pushed out a fix that will convert it into a png.

5 Likes


It feels a bit strange can be hollowed out in the center just like the picture below like the QR code.

2 Likes

Really nice addition thanks!

That’s a gap that should be closed somehow? QR invites would be epic!

7 Likes

Pushed out a fix. image hide background dots and image margin should work properly now.

4 Likes

Got a PR to core for a few new plugin outlets! Not sure if there’s any particular reason why the Sharing API isn’t being used in invites, so I’ll just keep the PR to plugin outlets.

6 Likes

Have a chat to the team about that.

5 Likes

How do you make this work for posts? I can only get it for topics:

I’m currently getting this instead:

I’m also greedy and would love to be able to do this (i.e. make a QR code) for any link on my site natively!!

4 Likes

I’m into this theme component! On my family forum, I have a category for howto procedures like how to keep my cat’s litter boxes clean. I was already thinking about printing out brief instructions to put by the litterboxes. That could have a QR code to the forum for the detailed instructions. I could create it elsewhere using the URL, but I like doing it directly in Discourse.

Interesting. Can you humor me and tell the epic tale for how this would be an improvement to the invite system? How and where would QR code invites be shared and how would they be accepted? Can you share prior art from other platforms to show how this is being done by others?Also, where do you envision the QR code being made available in the invite system?

You are using the new share link. That only grabs the URL for sharing with no modal. If you go to the post menu site settings you can enable the original sharing post menu item which would now also show the QR code. You can also click on the post timestamp to access the original sharing popup.

5 Likes

I never noticed that there was a sharing modal connected with the post timestamp! I have to admit, that is a nice place to tuck it, and the leaner sharing link does make sense for the most common uses.

Of note, my android phone (Pixel 7 Pro) automatically makes QR codes; this works with the invite modal too. And that is my major use-case. I never actually investigated this though. Ah, the voyage of discovery!

They aren’t as pretty as the ones this TC makes though!

3 Likes

Oh! Yes. That’s already implemented on Android. Who knew! Excellent! :rocket: thanks for educating me. So it’s already epic!

But wait!

I do not see this option on iOS? :green_apple:

On iOS I do not see a QR option?

2 Likes

Is the QR code expensive to generate? If not, why not just have it display automatically on the sharing modal rather than requiring selecting a button to show it?

It costs nothing, so rest is just coding. But for most people QR is just noise, so it can’t be directly visible.

2 Likes

Business Cards. A company using discourse could have a QR code for their platform to join. Or for that matter use on event posters etc…

EDiT: just saw Rob’s post about Android. However like you said yourself. Prefer to do it within Discourse
:wink:

2 Likes

As @Jagster said, it’s not expensive to generate the QR code, it’s mostly down to personal taste on how focused and immediate the QR code is. The TC comfortably utilizes the Sharing API (and a bit of DOM manipulation) for displaying the QR Code, effectively treating it on the same level as the other sharing sources. This more or less matched my view of QR codes as a secondary method for sending information. However, since starting my vacation outside of the US, I am fairly shocked by how prevalent QR codes are in the physical world.

I could explore adding an immediate QR code option to the settings, but I would likely need to revisit how/where the QR code is placed. Honestly, the current placement of the QR code in the modal (both in desktop and mobile view) is really shoehorned in with DOM manipulation. Ideally, in a desktop view, a QR code treated at the same level as the “copy link” button would occupy the entire right side of the modal, but that would need a new plugin outlet and a good helping of CSS changes. Currently there’s only one plugin outlet in the sharing modal, and its right next to the “New Topic” button, and I really want to avoid making a complex CSS or use more DOM manipulation.

tl;dr: I’ll think on it more and decide on if adding the immediate QR code setting is worth extra effort after I get back from the holidays.

2 Likes