Get started with embedding AerialSphere XP360 API [Beta]

Account Setup

Start using XP360 API Beta for free by creating an account at Check your email for a verification email as prompted, and click the “Activate” link in the email to finish activating your account. Follow the prompts to access your API key.


From this screen you can copy your API key using the copy icon to the right of the key preview, or by clicking on the key string. Click the edit icon for additional settings for this API key. You can also add new API keys as necessary.

XP360 API Basics

Create a new web page, and add a <script> tag pointing to the XP360 API and including your API key, like this:

<script src=""></script>

Add a <div> to your page, and then another <script> tag in which you call the API constructor:

1 2 3 4 5 <div id="aerialSphereTestDiv"/> <script> const aerialSphereApi = new AerialSphere('aerialSphereTestDiv'); </script>

The XP360 viewer will be shown in an iframe which will be created inside your div.

Here is a simple example:

Adding Styles

You can add CSS styles to the XP360 viewer iframe by passing a class name to the AerialSphere constructor; the class will be added to the iframe. Here is an example which adds styles to the div to make it fill the parent element, and adds styles to the iframe to fill the div:

Calling API Functions

Consult the API Reference for a list of the functions you can use. Here is an example which demonstrates adding markers and changing the camera view: Markers and Buttons example.