Selector placement allows you visually insert widgets into your site without any technical work. If you are not comfortable dealing with code, we highly recommend you to try using selector placement to insert widget.
When selector placement is selected, selector section will be shown. Click to Open Tool button to use placement tool.
OnVoard will automatically suggest url to open placement tool. You can also override the url to open with placement tool but it must be a url for your store.
1) On store's url, simply click on where you want the widget to be inserted.
2) To save insert location, click Save button on top right corner.
Go back and console and you should see CSS Selector field auto-filled based on your previous selection.
How to identify selector placement widgets?
Selector placement widgets will be denoted with data-placement-mode="selector" attribute.
How a selector placed widget look
<div
class="ov-app ov-app-aov-progress-bar"
data-app-id="apb_f64l6r32untsyyg"
data-app="aov-progress-bar"
data-placement-mode="selector"
></div>
How a custom placed widget look
<div
class="ov-app ov-app-aov-progress-bar"
data-app-id="apb_f64l6r32untsyyg"
data-app="aov-progress-bar"
></div>
It is important not to remove data-placement-mode="selector" attribute because that's how OnVoard identify selector placed snippets.