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.
To change the default behaviour simply go to your dashboard and go into the
settings -> customization section and choose which position to change.
You can specify the target for the launcher, the landing and for the collection. Note that you can also choose to override a target for a specific URL if needed.
The target field can contain any CSS selector, you can also use fallback selector by adding an other selector separated by a coma:
The first matching occurence will be where Caast will be injected.
The position field is used to specify where to inject Caast around the target. This input can take four values:
|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.
This section explain the positioning used in some methods parameters like render
elementsection 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
overwritesection 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.
positionsection is to specify where you want to insert the Caast widget around your
element. Those values can be :
|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 -->
<!-- afterbegin -->
<!-- beforeend -->
<!-- afterend -->