In our ‘Knowledge Base‘, you learned how to use HTML (basic) to interactive AR content elements by using basic Javascript, CSS and HTML coding

In this tutorial, you’ll learn how to use more advanced HTML to build stunning AR effects. 

Embed interactive map by using Google Maps

Open Google Maps in your web browser and search for a location.

Embed Vimeo using HTML

Using Vimeo instead of YouTube to embed videos on WonderPages has some advantages.

Change image src via button click

To change the src of the image you have to get the child because an augmentation creats a including and tag.

Change color of button after click

After clicking the button, the class “active” was added and the button toggles it color according to its status.

Play and Stop Video of Iframe API

When the button is clicked the YouTube element can be found with the id of the video

Start, pause, change src using set Timeout (Medium)

The first timeout starts the video after 3 seconds

Use APIs

Here is a lyrics API used which loads the lyrics of a song. After clicking the button with the cover of the CD the lyrics are shown.

Interact with 3D Objects

Similar to how you interact with YouTube videos there is a global variable on the window object

Best Practice - How to create an image gallery

Image galleries or "carousels" are very frequently used on many websites.
Close Menu
Close Panel