Embedding Inline Widget

To define the inline widget's placement on your website, you need to set up the Place the Widget option of the Display Rules tab:

Based on the website connection type, you may choose one of these options to embed your widget:

Via Custom Element (Universal) #

This option is universal and works for connection types.

You can place your widget based on the value of the custom place CSS selector. To do so, you need to choose the element of your website, that you want to bind your widget to and use (or create) it's specific ID or class to refer to in Custom Element CSS Selector field (see the Example 1 below).

Example 1: Let's say, you are going to place your widget based on the position of some box on your site.

1.1. Find the box you need in the site's HTML code:

<div> ... </div>

2.1. Add an ID to it, for example:

<div id="widget_here"> ... </div>

Or add a specific class to this element:

<div class="widget_here"> ... </div>

For the ID from Example 1, the Custom Place CSS Selector value would be: #widget_here

For the class from Example 1, the Custom Place CSS Selector value would be: .widget_here

When finished with the Custom Place CSS Selector value, you need to choose an item of the Widget Position list:

At the top of the custom element — would place the widget as a first element inside the box from the Example 1.
At the bottom of the custom element — would place the widget as the last element inside the box from the Example 1.
Before the custom element — would place the widget before the box from the Example 1.
After the custom element — would place the widget after the box from Example 1.
Instead of custom element — would replace the box from Example 1 with the widget.

Via the Embed Code (Universal) #

With this option, you'll see a message with the embed code to copy from:

Example: <div class="convertful-7318"></div>

Place this code in the HTML version of the page where you want the widget to appear. Note, that each code is unique and displays only once per page. If you want to place the same widget twice on the same page - create its duplicate with the unique code.

Based by the Shortcode (via Plugin Only) #

This option works only when you have connected your website via the plugin.

With this option, you'll see a message with the shortcode to copy from:

Example: [convertful id="7318"]

Place this code inside the text area of your site, where you want the widget to appear. Works both with visual text editors and HTML version editing. Note, that each shortcode is unique and displays only once per page. If you want to place the same widget twice on the same page - create its duplicate with the unique shortcode.

After the Post Content (via Plugin Only) #