Intro
Overview New in V15
Apps
Overview Configuration
<camera>
Overview Embedding Configuration Custom Interface JS Methods JS Events Collecting Videos
<photobooth>
Overview Embedding Configuration Custom Interface JS Methods JS Events
<microphone>
Overview Embedding Configuration Custom Interface JS Methods JS Events Collecting Audio
<room>
Overview Embedding Configuration Custom Interface JS Methods JS Events
<player>
Overview Embedding Configuration JS Methods & Events
<wall>
Overview Embedding Configuration JS Methods
<photo>
Overview Embedding
REST API
Overview
Assets
List Assets Show Asset Update Asset Delete Asset
Apps
List Apps Show App Create App Update App
Media Factories
List Media Factories Show Media Factory Create Media Factory Update Media Factory
Asset Responses
Video Object Photo Object Audio Object
Rooms
List Rooms Create Room Show Room Update Room Delete Room

Embeding a <room>

Below are instructions on how to embed your room into a webpage.

Embeding with static HTML
Embeding with dynamic (async) HTML
Embeding with JS
Embeding with React

Embedding a <room> with static HTML

First, make sure you have the cameratag.js and cameratag.css files included in the header of your site. The following <script> tag should appear at the bottom of your page's <head> tag

<script src='//www.cameratag.com/v15/js/cameratag.min.js' type='text/javascript'></script>
<link rel='stylesheet' href='//www.cameratag.com/v15/css/cameratag.css'>

Next, create a new <room> somehwere in your <body> like the one below.

<room id='[INSTANCE_ID]' data-app-id='[YOUR_APP_UUID]'></room>

You will need to replace the values denoted by brackets in the above example.

You will replace [YOUR_APP_UUID] with the UUID of the App you would like to use with this <room>. This can be found under the name of your App on any of the App pages on CameraTag.

You will replace [INSTANCE_ID] with a unique id for that instance of the <room>. This will allow you specifically refernce that <room> on the page.

Pleas note: Each room on a page MUST HAVE A UNIQUE INSTANCE ID however multiple rooms on a page may be attached to the same App.

Adding a <room> with asynchronous HTML

If you want to embed at a room after the page has loaded simply add the <room> element to the DOM as described in the static embed section above then call the CameraTag rescan() method: 
CameraTag.scan();
This will rescan the DOM for any uninitialized roomTag products.

How to initialize a room with JS

First, make sure you have the cameratag.js and cameratag.css files included in the header of your site. The following <script> tag should appear at the bottom of your page's <head> tag

<script src='//www.cameratag.com/v15/js/cameratag.min.js' type='text/javascript'></script>
<link rel='stylesheet' href='//www.cameratag.com/v15/css/cameratag.css'>

Then you can initialize a <room> directly with JS by using the CameraTag.init() method. The method takes three parameters:

// If you have the following div:
<div id="roomPlaceHolder"></div>

// The following JS will init a new room and replace your div 
CameraTag.init("roomPlaceHolder", "room", {appUuid: "YOUR_APP_UUID", id: "myRoom"});

element_id
The ID of an element in the DOM where the <room> should be added. This element will be replaced by the <room>

product_name
The name of the product you wish to instantiate (in this case "room").

options

The required options are appUUID (the UUID of your CameraTag App) and id (A unique identifier for this room instance). Other configurations options can be see on the the configuration docs page.

How to initialize a room with React

<room> tags can be inigialized with the CameraTag react module. See below:

import Room from CameraTag;

//You can the use the component like this:
<Room appUuid="YOUR_APP_UUID" id="myRoom"/>

There are more attributes that can be used to configure how the room functions. You can see them all on the room configurations docs page.