October 12, 2022
Expand the project functionalities with the XR+ front-end javascript & CSS API module (advanced javascript knowledge recommended)
Contact us for more infos
Add a colored layer placed at the back of the composition, the layer can be a gradient or a plain color, opaque or semi transparant
Trigger actions by pointing at composition items. When using the gaze trigger, you can trigger action without touching the screen, leaving the user hand free
Activate this module if the project don’t require the phone camera, ex: 360° photos/videos.
When the module is active, the experience will start without requesting/using the camera
December 23, 2021
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.
The API is a project module to enable in the studio
The API allows javascript file and CSS files to be loaded in the <body> of the project web document, with the usual <script> and <style> tags.
You must host those files, they cannot be hosted by XR+.
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 trigger an action on a composition item to call a function you have defined in your script.
download the javascript API class example
Those libraires are loaded by all projects and ready to use with the API:
considering: var XRAPI = new XRAPI_V1({});
| XRAPI.getIsLibraryLoaded(); | check if project library is fully loaded | boolean |
| XRAPI.getIsStarted(); | check if experience already started | boolean |
| XRAPI.getThreejsScene(); | get threejs scene | threejs scene |
| XRAPI.getCompositionItemByName(“my item name”); | get a composition item threejs root object by its name | threejs object |
| XRAPI.getCompositionParent(); | get parent off all threejs objects on the scene | threejs object |
| XRAPI.getDesktopScreenDomElement(); | get web dom element: desktop screen | dom element |
| XRAPI.getLoadingScreenDomElement(); | get web dom element: loading screen | dom element |
| XRAPI.getStartScreenDomElement(); | get web dom element: start screen | dom element |
| XRAPI.getMainScreenDomElement(); | get web dom element: main screen | dom element |
| XRAPI.goToScene(index); | change scene. Use index 1 for the first scene | |
| XRAPI.goToState(index); | change state. Use index 1 for the first state |
for questions regarding the API, email us at: contactus@xr.plus
April 21, 2021
Each XR+ project is made of one or several scenes, on the basic plan your have have up to 5 scenes, but this limit is raised to 10 or more on the advanced and expert plans.
Each scene is independent, you can setup actions to switch between scenes, take a look at the bird slideshow template for an example of a multi scene project
You can activate the timeline on the scenes to setup in & out timings for each of the scene items
April 29, 2021
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.
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
May 5, 2021
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.
To remove XR.+ branding visual elements, check this list (business plan only):
In your project:
In your AR player:
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.