index file template

Javascript XR+ API

The XR+ javascript API let developpers add front-end functionalities that do not exist in XR+, it also allows for a deeper UI / screens customization.

How it works?

The API is a project module to enable in the studio

The API allows 1 javascript file and 1 css file to be loaded in the <body> of the experience web document, with the usual <script> and <style> tags.

You must host those 2 files and let us know their web address so we can set them up in our internal system.

We provide a simple example – a javascript class – on how we recommend to communicate with the XR+ elements of the experience.

You can register and listen to particular events such as when the experience starts, or when an image marker is found/lost.

You can also setup your own events with the XR+ studio action editor. By doing so you can setup an action on a composition item to call a function you have defined in your script.

download the javascript API class example

How to start?

Let us know on which project you would like to activate the API module and the url of the .js and .css you need to load in the <body> of the experience.

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.
  • 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
    Stop the playback of an audio file
  • Play video
    Play a video from the composition
  • Pause a video
    Pause the selected video from the composition
  • Stop a video
    Stop the selected video from the composition
  • Show composition item
    Unhide the selected items from the composition
  • Hide composition item
    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
  • Timer
    Set an timer alarm, when the alarm is triggered, you can switch to another state
  • Set material
    Apply the selected material on the selected mesh
  • Set material color
    Change the color of the selected material

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

Simple 3D model based webAR tutorial

Here’s a simple tutorial on how to publish a 3D model in augmented reality on the web ( aka webAR ).
Let’s go through the various steps on the platform…

If you don’t have yet an account, create one ( the basic plan is free )
Click here to create a free account

1. Import a model

Create a new project and import a 3D model from your hard drive. Supported formats are .obj, .fbx and .glb (gltf).

For this tutorial, I’m using a Bonsai tree available here (download the fbx version).
This model was made by Scopia Visual Interfaces Systems, s.l. and Eteks,
available under the Creative Commons license ( ).

Is it also possible to make a project only from images, but I’ll only cover the 3D model process in this tutorial.

2. Import materials

If the imported model includes materials, you will be asked if you wish to import them.
For this model I’m choosing ‘yes’, so materials will be automatically assigned to the meshes.

3. The composition view

This is the 3D composition view:
– on the left column you can see the list of all items dropped in the composition (here there is only the bonsai tree)
– on the left column you can also switch the pages, materials and lights listing.
– the right hand side column displays the list of meshes from the model. This is where you can assign materials to meshes of your model

4. Set pot color

The top material is used on the tree pot, I’m choosing a dark gray for its color

5. Trunk wood texture

Adding the texture for the trunk (included with the model zip file), on the ‘bark’ material

6. Soil & leaves textures

Adding textures for the soil and leaves. Note that the leaves texture includes transparency.

7. Adjusting materials

Some extra material adjustments to darken a bit more the pot and the trunk (changing the default white color of a material to a darker color will also affect the texture), and lowering the shininess of the trunk.

8. AR tracking

Finally, set the tracking mode to SLAM

9. All done!

Your project is now ready and already published!
On the left column, you can see the public link to your project, in this case:

10. Optional: edit the project cover

You can customize the project cover image, to do so, go to ‘Publish settings’ > ‘Project cover’.
You can select an image for the cover background and adjust the position and size of the Bonzai tree.
You can import an image from your hard drive to be used as a cover.

Press ‘save cover’ to save your cover.

Simple image based webAR tutorial

Let’s have a simple step by step tutorial on making a web AR scene from images.

This tutorial is about making a composition from images, if you’re looking for the 3D model tutorial, go here

If you don’t have yet an account, create one
Click here to create a free account

We are going create a simple composition that will look like this when finished.

You can download all the images used in this composition here: Of course you can also use your own images.

1. Create a new project

in the XR+ editor, create a new project.

2. Import the first image

Click “import a file”. and import the image ‘bg gradient.png’, then click on “add to composition”.

3. Add white octogons

Next, reopen the library and import the ‘octogon.png’ image and add it to the composition.

There’s a gray area all around the white octogon, let’s hide it.
To do so, we need to set the transparency of this image, so only the white shape is visible.
Turn on ‘color keying’, and as a key color, choose the same gray as the one around the white shape.

Now that the transparency is setup, scale down a bit the element on the composition and place it to a bit on the left. You can use the rotation tool to give it a nice little angle.

Open the library to add it one more time to the composition and place it in the center, then add it one last time and place it a bit to the right.

4. Add the animal

Now import the ‘creature.png’ image, This image is a transparent png, so no need to set a key color.
Add it to the composition, scale it down a bit, and move it a bit in front and a bit down.

5. Add the back images

One by one, import the 4 screenshots images and place them at the back of the composition.

6. The logo

Import the ‘Little XR’ logo and place it on the top left area of the composition.

7. The button

Finally, import the ‘play-now.png’ image, add it to the composition, and set its shape to circle, to make a nice rounded shape.

Let’s bring attention to this button by adding a pulse animation. Note that the animation is not visible on the editor, but only when viewing the scene on your phone or in the simulator.

Let’s add an interaction
Click on “set an action”, to open the action editor. Choose ‘open webpage’, set as the web address. When users will touch the button, they will be redirected the his web address.

8. Project cover

Almost done, now in the ‘publish settings‘ tab, choose a cover background, press the ‘save cover’ button.

Above the QR code, you can see the public link to you scene, in this case: (yours will be different).

Type this web address on your phone web browser or scan the QR code in the editor to view the project in web augmented reality.