Positioning

By default Caast Library will look on your HTML for a DOM node with the id caast-wrapper, but maybe you don't want or cannot change your page HTML. To allow you a smooth integration, Caast Library can be loaded into any DOM element on your page.

Target

The target field can contain any CSS selector, you can also use fallback selector by adding an other selector separated by a coma:

.my-target, .my-fallback-target;

The first matching occurence will be where Caast will be injected.

Position

The position field is used to specify where to inject Caast around the target. This input can take four values:

Value	Description
Before Begin	Before the element itself
After Begin	Just inside the element, after the opening tag.
Before End	Just inside the element, before the closing tag.
After End	After the element itself.
Replace	Will replace and erase all content in the target

Specific target for mobile

If your website behave in a different way on mobile platform, you can specify where Caast should be loaded. The fields are the same as the desktop's ones.

Object

This section explain the positioning used in some methods parameters like render

"target": {
  "element": "#caast-wrapper",
  "position": "beforeend",
  "overwrite": false
}

• The element section is the DOM node where you want the widget to be loaded, it can be a class name or and id but also a really specific selector like #product-tab li:nth-child(3), be sure to try specific selector on your javascript console before using them on production.
• The overwrite section is to specify if Caast will replace all the content that is inside the element, if you set this option on true, the position option will be ignored.
• The position section is to specify where you want to insert the Caast widget around your element. Those values can be :

Value	Description
beforebegin	Before the element itself
afterbegin	Just inside the element, after the opening tag.
beforeend	Just inside the element, before the closing tag.
afterend	After the element itself.

This code can help you to better understand this behaviour

<!-- beforebegin -->
<div id="caast-wrapper">
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</div>
<!-- afterend -->