# 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:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Alteras](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/alteras/32/179824_2.png) [@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")

</div>

| | | |
| --- | --- | --- |
| ℹ | **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.

 ![Share modal with QR Code generated](https://global.discourse-cdn.com/meta/original/4X/e/c/5/ec517639f1fdc46e2633f0c2d65d5a9104676909.jpeg)

> **Screenshots**
>
> ![QR Code share popup in mobile view](https://global.discourse-cdn.com/meta/original/4X/c/d/0/cd0ac0d591ed96e0449b2c6d0a1dfe3e2284942d.jpeg)
> 
> ![The image shows a text selection with an option for generating a QR code for the selected post. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/1/0/d/10d259edf970c748dd04bd03d4bab2cfc9558afd.png)
> 
> ![Share modal QR code source highlight](https://global.discourse-cdn.com/meta/original/4X/b/d/b/bdb298a546c63c939aca68529baa43b85d6d1371.png)

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

---

_[View the full topic](https://meta.discourse.org/t/qr-code-shareables/341948)._