Why and how to add a QR code to your HTML5 banners

Have you ever wondered how to reduce the costs of "paid" advertising without compromising your visibility or conversion rate?

If you're ROI-minded, probably. If, on top of that, you're promoting your brand using HTML5 banners, then this article is for you.

First, we'll look at why adding a QR code to your HTML5 banners would be relevant. We'll also share a few hacks to optimize the use of your QR code. We'll finish with a short tutorial on how to add a QR code to your HTML5 banners with Abyssale.

What is a QR code?

You may have come across the QR code (or Quick Response code) on restaurant tables (after the pandemic) or store windows, for example.

It's a square pattern filled with black lines and squares on a white background. It contains information such as text, images or a link to a website. To read this information, simply use your cell phone's camera to "scan" it.

Why add a QR code to your HTML5 banners?

Adding a QR code to an HTML5 banner may seem counter-intuitive, since it adds "friction" for the user. They have to pull out their cell phone to read the information, and this can be discouraging. However, in certain situations, it can be relevant.

Earning space on your HTML5 banner

One of the main challenges of a banner ad is to provide a maximum amount of information in a minimum amount of space. QR codes make it possible to store data that is visually heavy or impossible to fit into a banner.

So, whether you're referring the customer to your website, a video, social networks, etc., the QR code means you don't have to compromise your banner design.

Adapting to HTML5 banner design

In its "classic" version, the QR code is not very aesthetic. However, it's now possible to customize it so that it blends in with the banner design. For example, you can play with colors or even add your brand's logo inside.

Reduce costs by creating interaction

Classic" HTML5 banners allow your prospects to reach your website or media with a simple click. Except that even users who aren't interested in your content or products can click. Every one of these clicks costs you money without earning you any.

The QR code avoids this by creating interaction directly with the user. You avoid the "tourists" who won't bother to take out their cell phones to scan the QR codes. What's more, you reduce the number of clicks, and therefore costs.

If you offer an ultra-niche product, you might want to consider integrating a QR code on your banners.

Improving the conversion rate of banner ads

In some cases, the QR code does more than reduce advertising costs. Above all, it's a way of providing maximum information about your product or offer to genuinely interested users. In this way, the conversion rate of your advertising campaigns can increase considerably.

You're probably wondering how you can track conversions without being able to measure clicks.

Know that you can track your QR code to find out how many times it's been scanned by a user.

Simply update the information

Next, we'll show you how to add a QR code to your HTML5 banner with Abyssale. So you'll understand why we say it's easy to update the information it contains. It's an important factor that allows you to modify only your QR code without having to touch the rest of the banner.

Last but not least, it's relatively simple and inexpensive to add a QR code to an HTML5 banner. That's what we're going to show you right now.

How to add a QR code to an HTML5 banner with Abyssale

Now that you've discovered the benefits of embedding a QR code on an HTML5 banner, you're probably wondering how to go about it. We'll explain it all right now:

From your Abyssale dashboard, create a new animation template with the format you want.

For our example, we'll use one of the 360 public templates available. We'll remove a few design elements in favor of the QR code.

To add a QR code to your template, click on the appropriate button in the toolbar at the top of the builder.

Instantly, it appears on your template. All you have to do is modify it so that it redirects to the information you want.

In our example, if we don't have a website to redirect users to (Uflow is fictitious), we'll insert the Youtube link for the music with the most views in the world. To find out, scan the QR code below.

Did you scan it? Yes, it's... Special 😅

As you can see from our example, you can change the colors of the QR code and add a logo in the center.

To do this, make the changes in the right-hand sidebar. As in the video below.

Once your template is ready, simply click on "Save & exit".

If you wish to modify your QR code, simply find your template in your Abyssale dashboard and select the "Single generation" mode. You'll then be redirected to a new pane where you can generate a new HTML5 banner with new QR code information.

Now you know everything! As well as being simple to insert into an HTML5 banner, the QR code can bring you excellent ROI on your advertising campaigns. Maybe you should think about it...

If you found this content useful, follow us on Linkedin. We regularly share content and tutorials about visual creation in automation.

‍