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

Embeding a <photo>

Below are instructions on how to embed a Photo into a webpage.

Embedding with HTML
Embedding with JS
Choosing thumbnail size

Embedding with HTML

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

<head>
  <script src='//www.cameratag.com/v14/js/cameratag.min.js' type='text/javascript'></script>
  <link rel='stylesheet' href='//www.cameratag.com/static/14/cameratag.css'>
</head>
Next, create a new <photo> somehwere in your <body> like the one below. 
<photo id='[INSTANCE_ID]' data-uuid='[ASSET_UUID]'></photo>
You will need to replace the values denoted by brackets in the above example.

You will replace [MEDIA_UUID] with the UUID of a CameraTag Asset (a Video or Photo UUID). If you use a video UUID the <photo> tag will display the thumbnail for the video.

You will replace [INSTANCE_ID] with a unique id you choose. This will allow you to specifically refernce that <photo> tag in the JS API.

Please note: Each <photo> on a page MUST HAVE A UNIQUE INSTANCE_ID (id atribites).

How do I dynamically add a <photo> to the DOM?

If you want to embed at a PhotoBooth after the page has loaded simply add the <photo> element to the DOM as described above then call 
CameraTag.setup();
This will rescan the DOM for any uninitialized <photo> tags.

Choosing a thumbnail size

By default the <photo> tag will use the half-size thumbnail image to reduce load times. If you plan on displayin the image in larger sizes you can have the <photo> tag load the full size thumbnail by using the data-thumb-size attribute: 
<photo id='[INSTANCE_ID]' data-uuid='[ASSET_UUID]' data-thumb-size='full'></photo>