You can also view
You are viewing documentation for version 11. This is the most recent stable release!

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='//cameratag.com/v11/js/cameratag.min.js' type='text/javascript'></script>
  <link rel='stylesheet' href='//cameratag.com/static/11/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>