# QR Code Shareables
**URL:** https://meta.discourse.org/t/qr-code-shareables/341948
**Category:** Theme component
**Created:** [December 11, 2024, 9:11pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948 "2024-12-11T21:11:58Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [December 11, 2024, 9:11pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/1 "2024-12-11T21:11:59Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | Adds a QR Code generator to share link sources |
| 👓 | **Preview** | [https://discourse.theme-creator.io/theme/Alteras/qr-code-shareables](https://discourse.theme-creator.io/theme/Alteras/qr-code-shareables) |
| 🛠 | **Repository** | [https://github.com/Alteras1/discourse-qr-code-shareables](https://github.com/Alteras1/discourse-qr-code-shareables) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
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`, `dot`, `rounded`, `classy`, `classy-rounded` |
| corners\_dots\_type | Type of dots used in the corners of the QR code.
**Options** : `dot`, `square`, `dots`, `rounded`, `classy`, `classy-rounded`, `extra-rounded` |
| 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](https://meta.discourse.org/t/create-a-qr-code-for-invites/341057) and [Possible to share a post by save a picture with a QR code?](https://meta.discourse.org/t/possible-to-share-a-post-by-save-a-picture-with-a-qr-code/190012)), 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 [https://www.npmjs.com/package/qr-code-styling](https://www.npmjs.com/package/qr-code-styling) package for customizing the QR code.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [December 11, 2024, 9:28pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/2 "2024-12-11T21:28:13Z")
How should that be shared? I’m used to use QR only from print medias 🤷♂️
---
### Author:  [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [December 11, 2024, 9:53pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/3 "2024-12-11T21:53:55Z")
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.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [December 11, 2024, 10:01pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/4 "2024-12-11T22:01:03Z")
Saving, or copying, doesn’t work on iPad.
---
### Author:  [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [December 11, 2024, 10:31pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/5 "2024-12-11T22:31:38Z")
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.
[https://github.com/Alteras1/discourse-qr-code-shareables/pull/4](https://github.com/Alteras1/discourse-qr-code-shareables/pull/4)
---
### Author:  [@Monikas](https://meta.discourse.org/u/Monikas)
#### Post date: [December 12, 2024, 9:09am UTC](https://meta.discourse.org/t/qr-code-shareables/341948/6 "2024-12-12T09:09:33Z")
It feels a bit strange can be hollowed out in the center just like the picture below like the QR code.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 12, 2024, 9:13am UTC](https://meta.discourse.org/t/qr-code-shareables/341948/7 "2024-12-12T09:13:59Z")
Really nice addition thanks!
> [@Alteras](#):
>
> the create invite modal doesn’t have any plugin outlets or use the Sharing API.
That’s a gap that should be closed somehow? QR invites would be epic!
---
### Author:  [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [December 12, 2024, 4:32pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/8 "2024-12-12T16:32:42Z")
Pushed out a fix. `image hide background dots` and `image margin` should work properly now.
[https://github.com/Alteras1/discourse-qr-code-shareables/pull/6](https://github.com/Alteras1/discourse-qr-code-shareables/pull/6)
---
### Author:  [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [December 12, 2024, 4:38pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/9 "2024-12-12T16:38:49Z")
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.
[https://github.com/discourse/discourse/pull/30209](https://github.com/discourse/discourse/pull/30209)
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 12, 2024, 4:39pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/10 "2024-12-12T16:39:48Z")
Have a chat to the team about that.
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [December 17, 2024, 12:36am UTC](https://meta.discourse.org/t/qr-code-shareables/341948/11 "2024-12-17T00:36:06Z")
> [@Alteras](#):
>
> Currently this only covers sharing topics and posts
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!!
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [December 17, 2024, 1:18am UTC](https://meta.discourse.org/t/qr-code-shareables/341948/12 "2024-12-17T01:18:21Z")
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.
> [@merefield](#):
>
> That’s a gap that should be closed somehow? QR invites would be epic!
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?
> [@nathank](#):
>
> How do you make this work for posts? I can only get it for topics:
>
> I’m currently getting this instead:
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.
---
### Author:  [@nathank](https://meta.discourse.org/u/nathank)
#### Post date: [December 17, 2024, 5:20am UTC](https://meta.discourse.org/t/qr-code-shareables/341948/13 "2024-12-17T05:20:35Z")
> [@tobiaseigen](#):
>
> 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.
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!
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [December 17, 2024, 7:05am UTC](https://meta.discourse.org/t/qr-code-shareables/341948/14 "2024-12-17T07:05:12Z")
> [@tobiaseigen](#):
>
> how this would be an improvement to the invite system?
Oh! Yes. That’s already implemented on Android. Who knew! Excellent! 🚀 thanks for educating me. So it’s already epic!
But wait!
I do not see this option on iOS? 🍏
On iOS I do not see a QR option?
---
### Author:  [@tobiaseigen](https://meta.discourse.org/u/tobiaseigen)
#### Post date: [December 20, 2024, 5:35pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/15 "2024-12-20T17:35:23Z")
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?
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [December 20, 2024, 6:04pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/16 "2024-12-20T18:04:23Z")
> [@tobiaseigen](#):
>
> Is the QR code expensive to generate?
It costs nothing, so rest is just coding. But for most people QR is just noise, so it can’t be directly visible.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [December 21, 2024, 6:36am UTC](https://meta.discourse.org/t/qr-code-shareables/341948/17 "2024-12-21T06:36:35Z")
> [@tobiaseigen](#):
>
> > [@merefield](#):
> >
> > That’s a gap that should be closed somehow? QR invites would be epic!
>
> 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?
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
😉
---
### Author:  [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [December 22, 2024, 2:44pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/18 "2024-12-22T14:44:42Z")
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.
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [January 16, 2025, 8:02am UTC](https://meta.discourse.org/t/qr-code-shareables/341948/19 "2025-01-16T08:02:05Z")
When I’m using an image, I don’t get QR code. Is there some demands of used format, size etc?
---
### Author:  [@Alteras](https://meta.discourse.org/u/Alteras)
#### Post date: [January 16, 2025, 4:34pm UTC](https://meta.discourse.org/t/qr-code-shareables/341948/20 "2025-01-16T16:34:20Z")
Hmm, that’s odd. There shouldn’t be any particularly strict requirements with the image itself…
What is the image and image size settings you are using?
[Next page](https://meta.discourse.org/t/qr-code-shareables/341948.md?page=2)