Widget Builder

Convertful provides you an easy to use and highly customizable builder to create widgets, that matches your website's design and needs.

2.jpg

In this article, we will guide you through its features to help you master all the functionality.

Settings #

To open widget's settings click the relevant icon on the left.
4.png

General Settings #

General setting -- settings that are the same for every type of widget.  

Widget Size #

This option defines the basic proportions for main widget's elements via the dropdown list.
5.png

Animation Type #

This option allows you to control the widget's appearance animation via the dropdown list. Once you pick an item from the dropdown list, you will see the triggered animation in the widget preview window.
6.png

Background Color #

Allows you to specify the colored background for the widget using the color calculator.
7.png

Background Image #

Allows you to add a background image to the widget using the upload.
9.jpg

Background Image Opacity #

Allows you to combine the background image and background color to create a color-based translucent mask for the image.
10.png

Default Text Color #

Allows you to define a default text color for your widget via the color calculator. It will affect success message text color, a color of closing element, and color of the text fields in which you haven't specified any color yet.
11.png

Paddings #

Allows you to specify paddings for this widget using the precise values (em or px). Note, that you can activate/deactivate the icon on the right allowing you to specify paddings separately or use the same padding value for all sides.
12.jpg

Widget Border Radius #

Allows you to specify the border-radius for the widget's body using the slider or precise value.
13.png

Show "Powered By" Link #

Allows you to display or to hide the "Powered by Convertful" string on your widget's body by changing the switch position.
14.png

Widget-Specific Settings #

Widget-specific settings -- settings that become available depending on the widget type you choose or depending on which version of your widget (desktop/mobile) you are currently editing.

Popup Specific Settings #

  • Close Button Location --allows you to specify the position of the closing element via the dropdown list.
    15.png
  • Overlay Color -- allows you to control the color and transparency of the translucent mask behind the widget via the color calculator.
    16.png

Inline Specific Settings #

  • Widget Place -- allows you to specify the location for your inline widget using one of 2 options:

    1. Based by the shortcode. This option available only if you're using the plugin to connect your website to your convertful account. In this case, you can simply paste the shortcode to the needed place on your website and widget appears in there. You can copy the shortcode from the canvas:
    17.png

    2. Custom. This option available for any type of connection. It allows you to place inline widget based on the custom class or id of your website's element. You can refer to it using specific syntax: ".custom_class" for classes and "#custom_ID" for IDs.  After specifying this anchor element, you can choose the position for widget via the "Where to Insert Widget?" dropdown list.
    18.png
  • Maximum Width -- allows you to specify the maximum width of your inline widget using the slider or precise value (in px).
    19.png
  • Can Be Closed -- allows you to add a closing element to your inline widget, allowing to close it without submitting.
    20.png

Sidebox Specific Settings #

  • Widget Place -- allows you to specify in which part of the screen widget should appear via the dropdown list.
    21.png

Fullscreen Specific Settings #

  • Close Button Type -- allows you to specify the closing element's type via the dropdown list.
    22.png
  • Scrollable -- allows you to specify if widget could be scrolled down.
    23.png

Floating Bar Specific Settings #

  • Maximum Width -- allows you to specify the maximum width of your floating bar's content using the slider or precise value (in px).
    24.png
  • Floating Bar Size -- allows you to specify the overall size of floating bar's elements via the dropdown list.
    25.png
  • Floating Bar Place -- allows you to specify if bar should appear at the top or bottom of the screen via the dropdown list.
    26.png

Mobile Version Specific Settings #

Settings that become available when you edit mobile version of widgets.

Every widget has a mobile-adapted version. You can switch between desktop and mobile using the controls at the top of the preview window.
2.png

Font Size for Mobiles #

After switching to the mobile version, you will see that text fields are duplicated. Also, they have mobile-specific sizes, that you can adjust independently of the desktop version. Use the relevant slider change this size.
3.png

Button Height for Mobiles #

Mobile version of widgets has a separate contol for the button height to help your widget stay visually attractive and mobile-friendly.
1.png

Fields Height for Mobiles #

Mobile version of widgets has a separate contol for the input fields height to help your widget stay visually attractive and mobile-friendly.
20.png

Mobile Version Place #

You can specify at which side of the mobile screen the widget should appear, top or bottom. Use this dropdown list for it:
8.png

Mobile Animation Type #

Allows you to specify the mobile-specific widget's animation via the dropdown list.
27.png

Features #

Such elements as inline images and videos are not displayed in mobile version and couldn't be added to it for the widget to remain mobile-firendly and cover a reasonable part of the mobile device screen. Learn more about mobile-friendly rules here.

Structure #

Every widget you create consist of widget body with rows and columns for the elements. You can see these structure layers by hovering your mouse over different areas of the widget:
28.jpg

The Structure is a customization tab. It allows you to edit the number of rows and columns and their settings. Also, you can adjust overall parameters of the widget body with this tab.

Press the layout icon to start working with it.
3.png

Columns #

Add Column #

To add new column simply click the plus icon on the right.
30.png

Remove Column #

To remove the column click the trash bin icon inside it. It appears when you hover your mouse over this column.
31.png

Resize Column #

When you use multiple columns inside one row, you can resize them by dragging the separator element.
32.png

Note how the percentage values within the columns change with resize. They show the column width from the total line width in %. This value is rounded to the nearest integer.
33.png

Swap Columns #

You can swap columns by simply dragging and dropping them inside the row. They will swap with the content inside them.
34.png

Column Settings #

To access setting of your column hover your mouse over it and press the edit icon.
35.png

Next, you will see these controls:

  • Background Color -- allows you to add a colored background to this column using the color calculator.
    36.png
  • Background Image -- allows you to add a background image for this column using the upload.
    38.jpg
  • Top / Bottom Padding -- allows you to specify top and bottom paddings for this column using the slider or precise value.
    39.png
  • Border Radius -- allows you to specify the border-radius for the column's background (image/colored background) using the slider or precise value.
    40.png
  • Vertical Align -- allows you to choose the vertical alignment of the content inside this column via the dropdown list.
    41.png
  • Extra Class Name -- allows you to create an extra class name for this column to refer to it in Custom CSS.
    42.png

Rows #

Add Row #

To add new row simply press the "Add row" icon at the bottom.
43.png

Duplicate Row #

You can duplicate the row with all of its content by pressing the relevant icon. It appears when you hover your mouse over this row. Note that unique form elements, such as input fields, won't be duplicated because the form can contain only one element of this type.
44.png

Remove Row #

To remove the row click the trash bin icon inside it. It appears when you hover your mouse over this row.
45.png

Swap Rows #

You can swap rows by simply dragging and dropping them inside the layout tab. They will swap with the content inside them.
46.png

Row Settings #

To access setting of your row hover your mouse over it and press the edit icon.
47.png

Next, you will see these controls:

  • Background Color -- allows you to add a colored background to this row using the color calculator.
    48.png
  • Background Image -- allows you to add a background image for this column using the upload.
    49.jpg
  • Top / Bottom Padding -- allows you to specify top and bottom paddings for this row using the slider or precise value.
    50.png
  • Spacing Between Columns -- allows you to specify the horizontal spacing between columns inside this row using the dropdown list.
    51.png
  • Border Radius -- allows you to specify the border-radius for the row's background (image/colored background) using the slider or precise value.
    52.png
  • Extra Class Name -- allows you to create an extra class name for this column to refer to it in Custom CSS.
    53.png

Elements #

Every widget you create consist of widget body with rows and columns for the elements. "Elements" is the tab that you can use to add new elements to your widget. Press the relevant icon to start working with this tab.
54.png

Add Element #

To add new element simply drag the relevant item from the tab and drop in the needed place in widget body.
4.png

Move Element #

You can drag and drop elements inside the widget body to move them.
56.jpg

Duplicate Element #

You can duplicate element by hovering your mouse over it and pressing the duplicate icon. Note, that input fields are unique elements and cannot be duplicated.
57.jpg

Remove Element #

You can remove the element by hovering your mouse over it and pressing the trash bin icon.
58.jpg

Element Settings #

Each type of your widget's elements (text, image, input fields, button) has its unique settings. You can customize those by clicking the element on the widget preview. Element settings open at the sidebar. 

Text #

  • Text Editor -- allows you to edit the text using a special canvas. You can also add links to the text using the relevant link/unlink icon.
    37.png
  • Font -- allows you to choose the font for your text via the dropdown list.
    59.png
  • Font Size -- allows you to control text size using the slider or precise value.
    60.png
  • Color -- allows you to choose the color for the text using the color calculator.
    61.png
  • Text Alignment -- allows you to choose the horizontal alignment for your text inside the column.
    63.jpg
  • Extra Class Name -- allows you to create an extra class name for this text to refer to it in Custom CSS.
    64.png

Image #

  • Upload -- allows you to change the image using your account upload.
    66.jpg
  • Width -- allows you to control image width as a percentage of the total column width. In the leftmost position of the slider, the size will be determined automatically based on the image initial size.
    68.png69.png
  • Alignment -- allows you to choose the horizontal alignment for your image inside the column.
    71.jpg
  • Aspect Ratio -- allows you to choose the ratio of width and height for the image via the dropdown list.
    72.png
  • Retina Quality -- allows you to preserve half of image size to retina-ready quality. This control is available only for the image width "auto", and it grants the sharpness of the image on both usual and retina-quality displays.
    73.png
  • Border Radius -- allows you to specify the border-radius for the image using the slider or precise value.
    74.png
  • Extra Class Name -- allows you to create an extra class name for this image to refer to it in Custom CSS.
    75.png

Button #

  • Text -- allows you to edit the main button text using a special canvas.
    76.png
  • Sub Text -- allows you to edit the button's subtext, which appears below the main one.
    77.png
  • Action -- allows you to specify the action that will be performed by this button via the dropdown list.
    78.png
  • Font -- allows you to choose the font for your button text via the dropdown list.
    79.png
  • Font Size -- allows you to control button text size using the slider or precise value.
    80.png
  • Background -- allows you to choose the button's background color using the color calculator.
    81.png
  • Text Color -- allows you to choose the button's text color using the color calculator.
    82.png
  • Height -- allows you to specify the button's height using the slider or precise value.
    83.png
  • Padding -- allows you to specify paddings for the button using the precise values (em or px). Note, that you can activate/deactivate the icon on the right allowing you to specify paddings separately or use the same padding value for all sides.
    84.jpg
  • Border -- allows you to specify the button's border width using the slider or precise value.
    85.png
  • Border Radius -- allows you to specify the border-radius for the button using the slider or precise value.
    86.png
  • Extra Class Name -- allows you to create an extra class name for this button to refer to it in Custom CSS.
    87.png

Video #

  • Video Link -- allows you to specify the link to a video. It supports links from YouTube and Vimeo.
    14.png
  • Show suggested videos on finish -- switcher allowing you to show suggested videos for YouTube videos.
    15.png
  • Show video title -- switcher allowing you to show/hide the title.
    16.png
  • Aspect Ratio -- allows you to choose the proportion of height and width for the frame of video.
    17.png
  • Width -- slider allowing you to choose the video frame width in % of total witdth of the content column. By default, it's set to "auto" and video stretches to the full column's width.
    18.png
  • Alignment -- allows you to choose a horisontal alignment for the video frame (for width less that 100%).
    19.png
  • Extra Class Name -- allows you to create an extra class name for this video to refer to it in Custom CSS.
    87.png

Fields #

Convertful allows you to create any type of input fields for your widgets. You can use pre-defined default fields (full name, company,  phone, etc.), custom input fields and hidden fields, with which you can send widget-specific data to your contact list. Note, that different email service providers (ESPs) support different list fields and formats. Once you setup an integration with yours, you may see tips guiding you which fields are not supported.

11.png

  • Add / Edit fields
    You can create new fields using the Add Fields dropdown list. It allows you to use pre-made regular fields such as phone and company along with the custom and hidden fields.
    7.png
    You can reorder fields and open their settings by dragging and dropping fields inside the canvas and pressing the edit button.
    8.png
    Inside the field's settings you can set up the labels, placeholders and whether you want to mark field as "required"
    10.png
  • Layout -- allows you to choose a horizontal or vertical position of the input fields to each other via the dropdown list.
    12.png
  • Font -- allows you to choose the font for your fields via the dropdown list.
    93.png

  • Font Size -- allows you to control fields text size using the slider or precise value.
    94.png
  • Background -- allows you to choose the field's background color using the color calculator.
    95.png
  • Text Color -- allows you to choose the field's text color using the color calculator.
    96.png
  • Text Alignment -- allows you to choose the horizontal alignment for the text inside your fields.
    98.jpg
  • Fields Height -- allows you to specify the field's height using the slider or precise value.
    5.png
  • Padding -- allows you to specify paddings for the fields using the precise values (em or px). Note, that you can activate/deactivate the icon on the right allowing you to specify paddings separately or use the same padding value for all sides.
    101.jpg
  • Border -- allows you to specify the field's border width using the slider or precise value.
    102.png
  • Border Color -- allows you to specify the color of the field's border using the color calculator.
    103.png
  • Border Radius -- allows you to specify the border-radius for the fields using the slider or precise value.
    104.png
  • Fields Interval -- allows you to specify the interval between fields using the dropdown list.
    6.png
  • Extra Class Name -- allows you to create an extra class name for this button to refer to it in Custom CSS.
    106.png

Behavior #

Behavior tab allows you to set up display rules for your widget. You can access behavior settings by pressing the relevant icon.
107.png

With it, you can define when widget should or should not appear and based on which conditions. You can set those up using sets of conditions called "Show when", "Show only if", "Don't show again". Also, in this tab, you can specify the "Success action" for your widget. Detailed information about this functionality described in our knowledge base section "Display rules".

Integration #

Integration tab allows you to set up an integration with Email Service Provider (ESP), that you use to store contact list and create email campaigns. Press the relevant icon to set it up.
108.png

With "Email Provider" dropdown list you can choose the ESP you need.
109.png

Based on the provider you choose, you need to input different sets of credentials to set up the integration.
110.png

Detailed information on how to connect your Convertful account with desired ESP you can find in the knowledge base section "Integrations".

CSS #

This is an advanced option for those, who are common with the CSS syntax. With this tab, you can manually customize your widget via the Custom CSS code. Press the relevant icon to access it.
111.png

Using it, you can refer to Extra Class Names that you created for your widget's elements.
13.png