At a glance, the calendar button offers to add events to the user’s calendar that gives you the possibility of documenting something on the user side.

Once decided to add a calendar event overlay to your AR.Create WonderPage follow the explanation below.

Here you can find out how to

How to add a calendar event:

Step 1: Click on the Calendar icon in the content toolbar.

Step 2: A thumbnail appears inside the scenario editor.

Step 3: Click on the thumbnail inside the scenario editor to move/position the element via drag & drop and to access the HTML editor and settings.



  • Name: Select a unique name for your event box element.

  • Size: Set individual size of event box (by width and height, the aspect ratio is fixed).

  • Position: Set individual position of event box (by x and y).

  • Opacity: Set transparency level of event box (0 = fully transparent, 1= no transparency).

  • Rotation: Set rotation of event box (by °).

  • Arrange: Define hierarchy in between different content elements.

  • Fix to Screen: Disconnects event box from target image and fixes it to screen so it will always be shown in the same position, no matter how the target image is moved.

  • Hidden: Makes event box invisible at the start of AR experience (to e.g. let it appear by a Button interaction at a later time).

  • Unique ID: Internal ID of the content element, mostly used for referencing inside contact fragments.


  • Event name: A unique name for your event.

  • Description: Write a brief description of this event.

  • Select Timezone: Select the anchor timezone.

  • Start Date/Time: Select when you’d like to start your event.

  • End Date/Time: Select when you’d like to end your event.

  • Address: Write the venue’s detailed street address.

  • Url: Your business website, social media, or ticket registration.

  • Appearance allows you to change the design of the pop-up that appears only inside the app and not visible in the studio.

  • Continue playing: The calendar box keeps playing also when image tracking is lost (target image is not visible in camera view anymore), the calendar box will be displayed centered to the screen.

  • Background color: Select the main color of the event box.

  • Font color: Select the color of the font.

  • Button color: Select the color of the button inside the event box on the lower-right corner.

  • Button text color: Select the color of the text inside the button of the calendar box.


Animations make your WonderPage more appealing as they add some motion to static content. For each content element, you can easily define how it should appear/disappear as soon as a target image is scanned or lost.

See how to animate your AR elements here.

Maybe interesting too:

Feel free to use different overlays in a single AR.Create WonderPage.

Further AR.Create overlay types are:




Text Box

Social Media





Did this answer your question?