You have the option to place the widget directly into your page, embedded among your other content. Embedding the widget can have a beneficial effect like making the widget feel be beneficial for when you want it to feel more native to your site’s experience and also helps or to avoid help users overlooking and ignoring your campaign due to banner blindness. The embeddable approach is useful for when you want to include your referral campaign on its own, stand alone page, or directly on a checkout page to cut through the noise of other post-purchase widgets and pop-ups.
To do this, there are just a few modifications to the script you have to make”make:
Setting the widget to 'Embeddable' mode
Inside the script’s behavior{} object is where you’ll find options affecting the presentation of the widget as well as the type of widget to be used.
...
After that is setup, the next step will be to select where the embeddable widget will appear on your page.
Selecting where the widget will be embedded
Determining the placement of the embedded widget is done using the mountSelector field. To do this, you’ll first want to identify the location where you want your widget to be displayed and grab the CSS selector of that element.
You can do this easily by navigating to the page on your site where you’re installing the widget, then opening up your browser’s dev tools, either by right clicking and selecting “Inspect” or simply by hitting F12 on your keyboard:.
...
Once open, find the element where you want the widget to be inserted, and then copy the CSS selector of that element by right clicking, opening the Copy submenu, then clicking Copy selector:
...
Paste that value into the mountSelector variable in the script, like this:
...