You can also view
You are viewing documentation for version 10. This version is antiquated!
The current version is version 11

Embeding a <photobooth>

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

Embedding with HTML
Embedding with JS

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> tag should appear at the bottom of your page's <head> tag

<head>
  <script src='//cameratag.com/v10/js/cameratag.min.js' type='text/javascript'></script>
  <link rel='stylesheet' href='//cameratag.com/static/10/cameratag.css'>
</head>
Next, create a new <photobooth> somehwere in your <body> like the one below.
<photobooth id='[BOOTH_ID]' data-app-id='[YOUR_APP_UUID]'></photobooth>
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 <photobooth>. This can be found under the name of your App on any of the App pages on CameraTag.

You will replace [BOOTH_ID] with a unique id you choose for that instance of the <phtobooth>. This will allow you specifically refernce that <photobooth> on the page (in the JS API).

Please note: Each photobooth on a page MUST HAVE A UNIQUE BOOTH ID (id atribite) however multiple photobooths on a page may be attached to the same App.

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

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