What Is an H5 Page? How H5 Campaigns Work in China

An H5 page is a mobile web page built with HTML5 and designed to be opened and shared in WeChat. In China, “H5” is the everyday name for these pages: interactive campaigns, games, product launches or illustrated reports that open in WeChat’s built-in browser from a link or a QR code, with nothing to install.

Key takeaways

• H5 comes from HTML5, the fifth major version of HTML; in China, the word names interactive mobile web pages.
• H5 pages open in WeChat’s built-in browser, and can use WeChat features such as sharing, scanning, location and payment through the WeChat JS-SDK.
• They are faster and less expensive to build than WeChat Mini Programs, but lack some features, such as one-stop purchase.
• Brands use them for campaigns, events and product launches; QPSoftware built an HTML5 campaign and a QR code game for Air France KLM.

What Does H5 Mean?

The term H5 comes from HTML5. H5 pages became popular when HTML5 was released and programmers started using it to create marketing and event pages for mobile. When they presented these pages to their clients, they called them H5 pages. It is not clear whether the name started as a misspelling or as an intentional abbreviation, but it has become the standard term in the industry.

HTML5 itself is the fifth major revision of HTML, the core language of the web, published as a W3C Recommendation in October 2014. Tencent uses the word H5 too: WeChat Pay calls “H5 payment” the payment made from a mobile web page opened outside WeChat, in a phone’s browser, as its H5 payment documentation explains. An H5 website, in other words, is a website made for mobile.

What Is an H5 Page in WeChat?

In WeChat, an H5 page is a mobile web page opened in the app’s built-in browser. Through the WeChat JS-SDK, the toolkit WeChat provides for web pages that run inside the app, the page can use features such as taking photos, choosing images, voice, location, sharing, scanning, coupons and payment. That is why you can think of an H5 page as a mix between a web page and an app.

H5 pages are lighter than a traditional desktop website, and they are mainly used for promotions and events. Once created, a page can be shared in Moments, in chats or by an Official Account (see how to manage a WeChat account), and people browse it without leaving WeChat. For brands, it is often the fastest way to launch a campaign in WeChat, and WeChat H5 page development is one of the services of QPSoftware’s WeChat team in Shanghai.

Why Are H5 Pages So Popular in China?

Since their beginnings, H5 pages have kept gaining popularity in China, and it is not difficult to understand why:

• They are highly interactive. Rich animations, such as sequential animations, animation groups, animation paths and timed effects, allow countless styles.
• In WeChat, they support features such as shaking the phone or turning it sideways to watch, which entertain and engage users.
• They integrate well with social media and encourage user-generated content, which extends the reach of a campaign.
• They offer an engaging experience that catches the attention of users and can generate new leads and sales.

Examples of H5 Marketing Campaigns

The campaigns below made the format famous in its early years, and they remain good examples of what an H5 page can do.

Durex

The Durex campaign showed what an H5 page can do. With a private chatbot, it encouraged people to talk freely about a topic that is taboo in China, safe sex, and it offered a private chat with relationship experts.

This interaction promoted the products discreetly and collected valuable data about consumers.

Olay

Olay, the beauty brand, increased its exposure with a creative campaign for its Natural White range, dated 2013 on the page itself.

The page featured the actor Li Dongxue. When users put their cheek against his picture, the page gave them a personal cuteness score. Most users were curious to test their score and share it with friends, which gave them a chance to win red envelopes. This personal touch made the campaign a success.

WeChat Pay

When WeChat Pay launched, its main competitor was Alipay. To introduce the new payment service and encourage people to use it, WeChat tried different approaches.

The campaign made the interaction personal: it kept track of the food bought with WeChat Pay and told users something about their life based on this information, with images of the restaurants they had visited and the food they had bought.

To encourage continued use, it included vouchers and a reward system, which became the main attraction for users. Customers were also told how much they saved with WeChat Pay.

Air France KLM, by QPSoftware

QPSoftware created an HTML5 campaign and a QR code game for Air France KLM. The campaign connected posters and flyers, designed by our team as part of its digital and print marketing collateral, to dynamic online media, ran in 6 airports in China and Taiwan with analytics and QR code tracking, and gained over 14,040 new followers for the airline on Weixin, Weibo, RenRen and Facebook.

How to Use H5 Pages in Your Marketing Campaign

H5 pages put almost no limit on your creativity, so take advantage of it. Creativity is what users expect from an H5 page: do not bore your audience with a dull page. Study your audience, personalize the message for them, and create a user experience they will remember.

H5 pages also help you collect data about your users and how they interact with your campaign. You can connect analytics tools that track user behavior. This data is one of the most valuable assets of an online marketer: it helps you understand who your users are, what they need and what they like, and shape your next campaigns around it.

Product launches are another good use. Since H5 pages are highly interactive and can include motion graphics, users can discover a new product online before it reaches the shelves.

H5 Pages vs. WeChat Mini Programs

H5 pages are faster and less expensive to develop than WeChat Mini Programs. If time and budget are critical, an H5 page lets you start a campaign or launch a product in a shorter time than if you had to develop a WeChat Mini Program.

H5 pages cannot replace Mini Programs altogether, though. They are a good idea in many scenarios, but they miss some important features, such as the one-stop purchase that Mini Programs offer.

	H5 page	WeChat Mini Program
Where it opens	WeChat’s built-in browser or any mobile browser	Inside WeChat
Development	Faster and less expensive	Longer and more expensive
Buying	WeChat Pay from the page	One-stop purchase built in
Typical uses	Campaigns, events, product launches	Selling products, customer support, services

For a closer look at the two formats, read our comparison of WeChat web apps and Mini Programs.

Can You Build an H5 Page Yourself?

H5 pages have become so popular that several H5 template websites let you create customized landing pages on your own. When this article was first written, all of these builders were in Chinese, which was reason enough for many foreign brands to drop the do-it-yourself approach. Page builders are also limited in options and features: to create a personal and unique experience, work with an agency.

If you want to give it a try and the language is not a barrier for you, popular H5 template websites include MAKA, renrenxiou and yixiouwang.

What Should You Do Next?

To enter the Chinese market today, you cannot overlook H5 pages: they can give you the advantage over your competition that you are looking for.

Would you like to explore how to create an effective H5 page, and what works to engage a Chinese audience? QPSoftware can build an H5 campaign for WeChat with you and give you the insight you need.

Frequently Asked Questions