Embeding a <wall>

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

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

Embedding a <wall> 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 <wall> somehwere in your <body> like the one below.

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

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 <wall>. 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 <wall>. This will allow you specifically refernce that <wall> on the page.

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

Adding a <wall> with asynchronous HTML

If you want to embed at a wall after the page has loaded simply add the <wall> 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 wallTag products.

How to initialize a wall 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 <wall> directly with JS by using the CameraTag.init() method. The method takes three parameters:

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

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

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

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

options

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

How to initialize a wall with React

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

import Wall from CameraTag;

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

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