index file template

Advanced interactions module

Interactions are made with the ‘interactions’ module, by switching between ‘states’ of the composition.

A state is made of actions, buttons can be added to it.

When a project switches to a new state, all actions from the state are applied.

There are many different actions, such as:
hide / show an object, play an animation, play a sound effect, change a color or set a timer to switch to another state after a fixed amount of time.

States actions

  • Change scene
    Switch to another scene.
  • Timer => switch to a state
    Set an timer alarm, when the alarm is triggered, you can switch to another state
  • Restart scene timeline
    Restart the current scene timeline
  • Play model animation
    Play an animation from a model that contains animations. At the end of the animation playback, you can choose to switch to another state.
  • Pause model animations
    Pause all the animations from the selected model
  • Play basic animation
    Animate a mesh from a model with a simple animation: scale up/down, pulse, rotate clockwise, rotate anticlockwise
  • Stop basic animation
    Stop all basic animation on the selected mesh

  • Play audio
    Play an audio file from the assets library
  • Stop audio(s)
    Stop the playback of an audio file
  • Play video
    Play a video from the composition
  • Pause video(s)
    Pause the selected video from the composition
  • Stop video(s)
    Stop the selected video from the composition

  • Show composition items
    Unhide the selected items from the composition
  • Hide composition items
    Hide the selected items from the composition
  • Show model meshes
    Unhide the selected meshes from the composition
  • Hide model meshes
    Hide the selected meshes from the composition
  • Display text in the footer
    Display a short text at the bottom of the screen
  • Set material
    Apply the selected material on the selected mesh
  • Set material color
    Change the color of the selected material

  • Recenter composition
    Recenter the composition in fonr of the user, only available when using floating tracking

States buttons

Buttons can be used to switch between states, or trigger an action (play sound effects, start a phone call, display a pop-up with text & image, open a webpage… )

To add a button to a state, first create a button, then add it to one or multiple states


You can follow this step by step tutorial to practice using the states interactions module

States interactions module tutorial

Web AR activity statistics

With this Screen you can find all statistics about views and interactions with your project in Statistics.

The First Row is displaying the views by date. You can know if it’s on AR, VR or embed mode views.

The Total Actions section tells you about specific data for your experience: time, sessions and the average sessions time.

Action & events column is for interactions with events and possible interactions in your experience like taking a photo, switching to a state, scan an image tracking marker.

The cities sections is for where your experiences were viewed geographically, and the number of views filtered by cities.

All this data can be filtered, by year, by month or by date interval.

White label branding

To remove XR.+ branding visual elements, check this list (business plan only):

In your project:

  • Use a custom AR tracking image (marker)
  • Embed the project from an external website
  • On the ‘screens’ tab, tick the Skip the ‘This is an augmented reality experience for mobile’ screen option
  • Create an AR player and assign it to your project

In your AR player:

  • Set a custom logo
  • Customize the loading screens
  • Customize the about screen
  • Customize the AR help screen

Publishing on an external website

Business users can load projects inside an external web domain within an iframe, like when adding a Youtube video player on a web page.
We provide a template to do so, no coding to do, just upload the .html file to your server.

Note: an SSL certificate (https:// …) on your web domain is required to embed projects.

Example of embed project


It is very important to optimize your projects!
Try to keep your project total size (images + models + audio files + video files) under 10Mb, or even 5Mb.

On your 3D models, do not use oversized textures, and delete all faces that are hidden.

Short loading times and a smooth framerate always make an experience more pleasant for the end user…

Loading time estimation

Above the 3D composition view, you can see an estimation of the time required to load your project, considering the mobile network speed.

How to optimize web AR loading times

Use as less assets as possible, import them once in the assets library and add them multiple times on the composition.
Don't import oversized images.

How to optimize web AR performances

Reduce the number of polygons in your favorite 3D modeling software, reduce the size of each texture

Project meta data

When you share an XR+ web AR project on social medias or messaging application, a preview of the experience is displayed, here’s an example with a tweet:

The data pulled to populate tweets or other social media shared experiences consist of:

  • An image
  • A title
  • A short description

The image used is your project cover, so make sure it’s looking great!

The title and the description can be edited in the studio in ‘Publish settings’ > ‘Project meta data’.

Tips & Tricks

Did you know?

  • For more comfortable sessions in the studio, you can switch to full screen with the ‘full screen’ button in the top navigation bar
  • You can rename materials by double clicking on their names in the materials list
  • You can use the keyboard arrows to navigate in the composition 3D view