Skip to main content

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:

ValueDescription
Before BeginBefore the element itself
After BeginJust inside the element, after the opening tag.
Before EndJust inside the element, before the closing tag.
After EndAfter the element itself.
ReplaceWill 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 :
ValueDescription
beforebeginBefore the element itself
afterbeginJust inside the element, after the opening tag.
beforeendJust inside the element, before the closing tag.
afterendAfter the element itself.

This code can help you to better understand this behaviour

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