How to add a QR code to your My Sticky Elements widget

In this guide we’ll show you how to launch a QR code from your My Sticky Elements widget. For example, this can be useful if you use WeChat and would like to display your profile QR code in one click.

So let’s dive in. First, you need to find your user QR code in your WeChat dashboard. You can find your QR code by opening this page: https://admin.wechat.com/ and then clicking on ”Settings”. Right-click on your QR code and select ”Copy image address”. 

Now, go to your My Sticky Elements settings and in the Social channels tab, add a new ”Custom shortcode/ HTML” channel. You can use this custom channel to show any embedded content using a shortcode, iFrame, or any custom HTML code.

In the field that will show up below, add this code to have the QR code aligned in the middle with a compact border. Please make sure to add your unique QR code link in place of (add your link from step one here):

<html> <body> <img align=”middle” src=”(add your link from step one here)” width=”300″ height=”260″> </body> </html>

You can of course modify your width and height size.

If you prefer to also add a text, for example, ”WeChat QR” you need to add this code between the HTML and BODY tags in the code above. Just make sure you add your text in place of (your text here):

<h2>(your text here)</h2>

In the end, it should look something like this: 

<html> <body> <h2>your text here</h2> <img align=”middle” src=”(add your link from step one here)” width=”300″ height=”260″> </body> </html>

Select whether you want your QR code to be displayed on desktop or mobile devices, or both. You can then customize the channel appearance by uploading a custom icon – for example the WeChat logo – or choosing one from the Font Awesome directory. If you select an icon from the Font Awesome directory, you can change its background colour and colour. You can also add an icon text (the text that will appear under the icon in the My Sticky Elements widget), for example ”WeChat”, as well as your icon text size.

That’s it! When you’re done, don’t forget to hit the ”Save changes” button to make sure your settings will be displayed accordingly. In the end, depending on your settings and customisations, it should look something like this…

…or this:

 

 

Still have questions? Ping us at our Facebook group, and we’d love to help out!