Hype for WeChat - extract QR Code - background-image

I’m creating an animation with Hype intended for use on WeChat. WeChat commonly uses H5 pages as advertisements/forwards. I’ve got everything working, but one of the typical things in WeChat is QR codes. Even in mobile H5 pages - a QR code is placed within, and WeChat has a feature to Extract that QR code after a long press (you long press, a popup menu appears, and one option is Extract QR Code).

When I load the H5 page I created in WeChat - and I long press on the QR code - I do not receive a popup menu. My theory (which could be completely wrong) is that this is because Hype puts all its elements as background-image. In the same as when you normally click in a website on an image, you have the option to save that image, the use of background-image prevents that action. Now presumably I could edit the html after the fact - but I was wondering if there is something simpler I’m missing in Hype in regards to this.

The page is here for if interested, but the content is in Chinese :slight_smile: :


Thanks in advance for anyones thoughts/help.

Yeah that’s probably it. To workaround this, you could create a rectangle and insert it manually, by using code like this:

<img src="http://site.com/image.jpg" width="100" height="100">

That would like be more compatible. Also, make sure that it is the topmost layer in the layer order.

1 Like

Great - thanks so much! That worked - in Hype I simply edited the HTML of the image element as you suggested with an image source, and put it in top most position. It was recognised in WeChat as a QR code.

Thanks again!

WeChat? 哥们中国的吗?


1 Like

Just an update here for those who are interested. We launched the H5 campaign above and received a good response. I think Hype is a great tool for it. We created two pages, one in English and one in Chinese. The English one is here for those interested to see how it works. http://content.lincko.com/MakeStuffHappen.html. They are designed only for display on mobile, as that’s the primary interface for WeChat. The Chinese one was updated, but remains at the link above.

Editing the html of the element and loading it that way allows for both long press+extract and tap events to be recognised in WeChat. We placed both a tap event on each QR code to go to a link (done in hype). Also the native Extract QR code function of WeChat is allowed to work this way (no special code or events needed for that as long as you are using a QR code image, loaded through html in the element).


Hi! I’m Chinese, and we have used Hype to make H5 for a long time. It’s really an amazing tool for it!! Thanks for your share~ We can discuss a lot later about Hype using in H5 making~!

1 Like

It would be great if we can share good advice on H5s :relaxed: Thanks for posting!



  1. Place the QR image into the project like normal. (or you can draw a shape the same size.

  2. Double-click the image (or shape) to bring up the option to edit its html.

  1. Click the edit (pencil) icon.

  2. Enter the html reference to the file (can also specify the size). I am referencing an image that I have uploaded to the web. You can also reference the file internally from your resources folder.

One caveat - for some reason, 微信 uses the first image you reference as the image it shows in the 文章 preview. So you make want to use the same technique above to reference another image first. Even if you modify the header with tags, WeChat seems to use the first referenced image.

You can see examples here - use the inspect/developer tools in your browser to view.


如果你还是有问题,可以问我, 也可以用微信交流。

1 Like