How to
Apr 23, 2024

Adding interactive capabilities to landing pages and microsites

Interactive landing pages offer several benefits for your business.

Adding interactive capabilities to landing pages and microsites

Interactive landing pages offer several benefits for your business.

Firstly, they provide a more engaging and immersive user experience, capturing the attention of visitors and increasing the likelihood of them staying on the page longer. The interactivity allows for dynamic and personalized content, catering to the specific needs and preferences of each user. This helps in generating leads, as interactive elements can encourage users to take action and provide their information.

Additionally, interactive landing pages enable businesses to track and analyze user behavior, gaining valuable insights for optimization and enhancing conversion rates.

Overall, interactive landing pages can enhance brand perception, drive conversion, and improve overall marketing effectiveness.

What are interactive landing pages?

Interactive landing pages is content that allows customers to actively engage with it.
PDFs are traditionally static and almost "offline".  

With interactive content, the customer is not just a passive viewer, but becomes an integral part of a dynamic, two-way experience.

What are some example for interactive content?

Content consumers today demand more. businesses are utilizing interactive elements in their content marketing to maximize engagement. Interactive content takes many forms and can be applied to any marketing programs that typically make use of content to deliver results.

Do I need to start from scratch?

No!

Your eBooks, Whitepapers, Presentations, Guides and any Illustrator, Indesign, Figma or Sketch file can now automatically become interactive content!

All you need to do is follow this guide, export your content to PDF and drop it in Celero.

How long does it take to learn?

Good news! Everything you need is right here.
With other products, to create interactive content, you would need to learn new editing tools, or wait for developers.

With Celero, you are now in control.

You can produce interactive content using the editing tools you already know: Illustrator, Indesign, Figma,  Sketch, Microsoft Office, Google Drive or any other.

Links

Simple url links become overlay dialogs automatically

If you have links in your content, you have to do absolutely nothing more!

Links you already have in your content will be automatically recognized by Celero.

If possible, Celero will open those links in a dialog overlay, rather than a new tab. This helps the customer stay in their journey, and when they are done drilling down on an additional topic, they can close it and continue on the journey.

Here is an example of a link opened as a dialog where one presentation was linked to another:

In this example a normal "Request a demo link" opened as a dialog from within the content itself:

❗If your links open in a new tab, it is probably because the site you're referring to doesn't allow embedding.

Some of the reasons for this are listed below. If it is your own website, you can change the header to allow it. If it is someone else's website, you will need to contact them.

1. Your website returns a X-Frame-Options header.
If the following setting is there "X-Frame-Options: DENY", embedding the page is not allowed. More information

2. Content-Security-Policy header containing "frame-ancestors".
If this header is present, you should include the base URL of your content in order to allow embedding. More information

Video

Adding videos to existing content is easy. For example, existing video links get converted automatically to a popup dialog rather than a new tab (if possible).

However, as you rethink some of your existing content, you can now make video play right within your content. The better news - is that we placed the "power" in the hands of the content designer.

See this example - created in google slides. Feel free to copy the slide and make it your own

See Celero'd content

See original slide on Google Slides (Feel free to copy and make it your own)

Video - Embedding in your content

In some scenarios, you would want to have customers view a video right from within your content.

To achieve this, simply pick an object in your editor that you can link and enter a URL with the following structure:


SYNTAX: 
https://YOUR_VIDEO_URL
https://www.youtube.com/embed/[your video id]?embed=true

FOR EXAMPLE:
https://www.youtube.com/embed/-12AZ3ddNWE?embed=true

Your video id can be taken from looking at the URL of your video. 
For example (in bold):
https://www.youtube.com/watch?v=-12AZ3ddNWE

Here are some parameters you can add customize the URL:

  • autoPlay - by default is false, allows you to autoplay the video (autoPlay=true) upon content open
  • poster - a URL to an image that will appear before the user clicks to play

SYNTAX:
https://www.youtube.com/embed/[your video id]?autoplay=1&embed=true


EXAMPLE FOR A YOUTUBE VIDEO WITH AUTO PLAY:
https://www.youtube.com/embed/-12AZ3ddNWE?autoPlay=1&embed=true

Video - Popup dialog (with lightbox effect)

In some scenarios, it would be valuable to have the video popup as a dialog with a lightbox so that the user is not distracted by the rest of the content.
Clicking away from the video will bring the user back to the content.

you would want to have customers view a video right from within your content.


SYNTAX
No syntax! Just place your link on any object, text or element in your PDF

EXAMPLE FOR VIDYARD WITH AUTOPLAY:
https://play.vidyard.com/34ZDZ57E2aApSveZrxSiLq?autoPlay=true

Adding an Animated GIF to Content

GIFs are graphic file formats that combine multiple images to make a looping animation.  Since they’re just a series of static images, there is no audio component. Typically, GIFs are just a few seconds in length, though they can be much longer.

To place an animated GIF on your content, just link any element in your content with a link to your animated GIF:


SYNTAX
Simply add this link to your PDF

EXAMPLE FOR GIPHY LINK
https://media4.giphy.com/media/Mab1lyzb70X0YiNLUj/giphy.gif?cid=ecf05e47v6jtu568otltsc5dsujgw8v813pqi1517hgx4pac&rid=giphy.gif&ct=g

💡 It is a good idea to link an image in your design and link it to the GIF url.

Amir Shub
Amir Shub
Founder and CEO
Follow us on: