Installing an Embeddable Widget

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 native to your site’s experience and also helps to avoid 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”

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.

        behavior: {
            type: 'referral',
            flavor: 'modal',
            openByDefault: true,
            forceOpen: true,
            delay: 0,
            mountSelector: 'body'
      	}

To activate an embeddable configuration, the first step is to change the flavor option. The flavor option controls how the widget is presented to the end user, this is often set as ‘modal’ or ‘callout’, but we’ll want to swap it to ‘embeddable’, like this:

        behavior: {
            type: 'referral',
            flavor: 'embeddable',
            openByDefault: true,
            forceOpen: true,
            delay: 0,
            mountSelector: 'body'
      	}

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:

        behavior: {
            type: 'referral',
            flavor: 'embeddable',
            openByDefault: true,
            forceOpen: true,
            delay: 0,
            mountSelector: '#shopify-section-template--15644216918156__collage-0 > div > div > div > div.collage__item.collage__item--image.collage__item--right > div'
      	}

That’s all there is to it, now your ICS widget will be deployed on the page in the area of your choosing!