This parameter selects a specific element in DOM, which is acting as a reference element for our widget. It is possible to choose the insert position of our widget in the menu on right side: it can be placed before/after selected element, as it’s first or last child. Element in DOM can be chosen with CSS or XPath selector.
On the screenshot below <div> with class “description” is chosen with XPath as a reference element, and Videoly widget (iframe) is inserted as a firstChild of this element.
It is possible to create several rules. Widget is attached to the first selector, however, if it is not available, it will try to search for other selectors. There are some cases, when it can be useful. For example, layout for mobile devices might differentiate from desktop-layout, hence to make our widget visible, another DOM-element has to be chosen.
Toggle external elements
This option allows to show/hide any element in DOM, according to video availability. If a product has available videos, element will be shown (inline-style “display: block !important;” is attached). If there are no available videos, inline-style “display: none !important;” will be applied to the chosen element. Element to show/hide can be chosen with CSS or XPath selector.