A button executes a defined action as soon as it is clicked by the user in the genARate mobile app. It can either trigger external content (e.g. a web link, call, etc.) or apply actions to other AR elements (e.g. visibility of an image, start/stop a video, etc.).

What's your benefit?

In this way, buttons allow you to include interactivity and logic easily into your Augmented Reality(AR) scenario by using a simple workflow editor.

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

Now here you can find out how to

How to add a button:

Step 1: Click the button icon in the toolbar on the left side of your screen.

Step 2: A thumbnail appears inside the scenario editor. Click on the thumbnail inside the scenario editor to move/position the element via drag & drop and to access the Action workflow editor and settings.

Note: To simplify your work with buttons, first access the settings of the content elements inside your scenario and define a clear, unique and addressable name for each. This will help you afterwards with applying the button actions to each of the elements.

Pro Tip: To avoid confusion with setting up buttons and actions, always build the following logic in your mind:

When the user clicks on the button [which is selected in scenario editor], the augmentation(s) [list of selected content elements] execute the action(s) [defined actions per element]”.



  • Name: Select a unique name for your button/tab

  • Text: Enter label of button/tab

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

  • Position: Set individual position of button (by x and y)

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

  • Rotation: Set rotation of button (by °)

  • Arrange: Define hierarchy in between different content elements

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

  • Hidden: Makes button 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 HTML fragments.


  • Background Image: Add image file as the background of the button.

  • Background Color: Change the background color of the button (HEX/RGB/HSL).

  • Font: Set font of label text.

  • Font size: Set size of label text.

  • Font color: Set color of label text.

Actionworkflow editor

The workflow editor is split into two different sections:


  • First: select the content element (“Destination”), to which the action should be applied, by its name.

  • This can either be the button itself or any other available element inside your AR scenario.

  • You can select multiple destinations for each button.


  • Secondly: assign a list of available actions for each element you have selected in “Destination”.

  • Define the selected action for the selected content element.

  • Each content element can only handle one action.

  • Note that the available actions may differ related to the content type of the selected element (not all actions are available for all content types!).


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


Calendar event



Did this answer your question?