Your browser is out of date. The site might not be displayed correctly. Please update your browser.

Lead Generation Tool: Widget Customization Article

One of the best things about the Lead Generation tool is that it allows you to customize the widget to your specific needs. Every website is different, so being able to customize your widget to fit the unique look and feel of your site can make a difference in actually converting visitors into leads.

The widget’s interface can be customized by changing the styles of its elements. The Lead Generation widget consists of two parts: front facing and backend.

The front facing side includes the input fields and a call to action button, while the backend side customizes the ‘thank you’ message that your newly acquired leads will receive after clicking on your call to action button.  

Table of Contents:

  1. Standard Widget Code
  2. Horizontal Widget
  3. Adjusting The Width
  4. Adjusting The Border

1. Standard Widget Code

A great thing about having your own widget code automatically generated through the Lead Generation tool is that you can simply copy and paste the code onto whatever page you want the widget to appear. A standard widget code will look like the following:

<!-- standard widget container -->
<div class="ssa-leadgen-widget">
 
    <!-- widget’s front side, input fields with audit start button -->
    <div class="ssa-leadgen-widget__step1">
        <!-- widget headline, as in the settings -->
        <div class="ssa-leadgen-widget__title">Get a free site audit</div> 
        <form> 
            <!-- Input field block -->
            <label class="ssa-leadgen-widget__label"> 
                <!-- Inputfield scripts, as in the the settings -->
                <span>Domain</span> 
                <!-- Input field -->
                <input class="ssa-leadgen-widget__input" type="text" name="url" /> 
            </label>
            <!-- / Entry field block -->
            <label class="ssa-leadgen-widget__label">
                <span>Email you'd like us to send your report to</span>
                <input class="ssa-leadgen-widget__input" type="text" name="email" />
            </label>
            <label class="ssa-leadgen-widget__label">
                <span>Your phone number</span>
                <input class="ssa-leadgen-widget__input" type="text" name="phone" />
            </label>
            <!-- Audit start button, as in the settings -->
            <input type="submit" class="ssa-leadgen-widget__btn-start" value="Audit now" /> 
        </form>
    </div>
 
    <!-- widget’s reverse side -->
    <div class="ssa-leadgen-widget__step2">
        <!-- Message following audit start, as in the settings -->
        <div class="ssa-leadgen-widget__success">Thank you</div> 
        <!-- button for returning to the widget’s front side -->
        <div class="ssa-leadgen-widget__btn-to-step1">You can audit another site</div> 
    </div>    
</div>

In order to set your own styles, you need to wrap the widget in a DIV container. A DIV container is essentially a container that will hold your content, in this case, the widget. You can wrap this code in your DIV when embedding it into the HTML code on your page. For example, let's say the name of your style is “my-awesome-widget”, that would look like this:

<div class="my-awesome-widget">
<!-- semrush siteaudit widget -->
Widget’s code
<!-- /semrush siteaudit widget -->
</div>

Once you do that you’ll need to override the styles in your CSS files in the following way:

.my-awesome-widget
.ssa-leadgen-widget {
width: 850px;
}

Keep in mind, this DIV container needs to be added before the container that includes the widget class itself. This way you will ensure a correct chain of styles and that your styles will have higher priority than the default ones. This will give you more freedom when attempting to gain your leads.

Note: You should not choose classes with the ssa- prefix for your container as they can be used within the widget itself.

2. Horizontal Widgets

With the Lead Generation Widget, you are able to display it as both vertical and horizontal depending on what works best for your landing page. See what this widget would look like on the front facing side:

Lead Generation Tool: Widget Customization image 1To create this type of widget add a container with the following class .my-awesome-widget-horizontal and styles

.my-awesome-widget-horizontal
.ssa-leadgen-widget {
width: 850px; /* set widget width */
}
 
/* Entry field’s styles */
.my-awesome-widget-horizontal
.ssa-leadgen-widget__label {
display: inline-block; /* display input fields horizontally */
margin-right: 20px; /* add space between the fields */
}
 
.my-awesome-widget-horizontal
.ssa-leadgen-widget__btn-start {
display: inline-block; /* display the button horizontally */
}

The above figures also apply to widgets with a hidden phone number field.

If you don’t want to change the height of the backend  side, add the following code to your widget's CSS file:

.my-awesome-widget-horizontal
.ssa-leadgen-widget {
height: 152px; /* set widget’s height */
}
 
.my-awesome-widget-horizontal
.ssa-leadgen-widget__icon-ok {
display: none; /* hide icon */
}

Lead Generation Tool: Widget Customization image 2

3. Adjusting The Width

You are also able to determine if you want your widget to have a fixed width across all screens, or if you want the width to be adaptable across the different potential platforms.

*Note that when set in percentage, the widget will become adaptive; when set in pixels, the width will be fixed.*

For a responsive or fixed width layout of your widget, add a container for the widget .my-awesome-widget-adaptive and insert the following code to your CSS file:

.my-awesome-widget-adaptive
.ssa-leadgen-widget {
/* set widget width. */
/* When set in %, the widget will become adaptive, when in px, the width will be fixed */
width: 100%; 
max-width: 500px; /* if you want to limit the maximum widget width */
}
 
.my-awesome-widget-adaptive
.ssa-leadgen-widget__input {
width: 100%; /* set the maximum available width of entry fields */
}

Here is what the widgets will look like on full screen:

Lead Generation Tool: Widget Customization image 3With a maximum width:

Lead Generation Tool: Widget Customization image 4On a phone screen:

Lead Generation Tool: Widget Customization image 5

4. Adjusting The Border

Add a container for the widget .my-awesome-widget-border and insert the following code to your CSS file in order to:

1. Remove the border around the widgetLead Generation Tool: Widget Customization image 6

.my-awesome-widget-border
.ssa-leadgen-widget {
border: none;
}

2. Add rounded corners to input fields

.my-awesome-widget-border
.ssa-leadgen-widget__input {
    /* copy the rounding radius to ensure cross-browser compatibility */
    -webkit-border-radius: 21px; 
    -moz-border-radius: 21px;
    -ms-border-radius: 21px;
    -o-border-radius: 21px;
    border-radius: 21px;
}