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.
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 -->
<!-- widget’s front side, input fields with audit start button -->
<!-- widget headline, as in the settings -->
<div class="ssa-leadgen-widget__title">Get a free site audit</div>
<!-- Input field block -->
<!-- Inputfield scripts, as in the the settings -->
<!-- Input field -->
<input class="ssa-leadgen-widget__input" type="text" name="url" />
<!-- / Entry field block -->
<span>Email you'd like us to send your report to</span>
<input class="ssa-leadgen-widget__input" type="text" name="email" />
<span>Your phone number</span>
<input class="ssa-leadgen-widget__input" type="text" name="phone" />
<!-- Audit start button, as in the settings -->
<input type="submit" class="ssa-leadgen-widget__btn-start" value="Audit now" />
<!-- widget’s reverse side -->
<!-- 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>
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:
<!-- semrush siteaudit widget -->
<!-- /semrush siteaudit widget -->
Once you do that you’ll need to override the styles in your CSS files in the following way:
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.
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:
To create this type of widget add a container with the following class .my-awesome-widget-horizontal and styles
width: 850px; /* set widget width */
/* Entry field’s styles */
display: inline-block; /* display input fields horizontally */
margin-right: 20px; /* add space between the fields */
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:
height: 152px; /* set widget’s height */
display: none; /* hide icon */
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:
/* set widget width. */
/* When set in %, the widget will become adaptive, when in px, the width will be fixed */
max-width: 500px; /* if you want to limit the maximum widget width */
width: 100%; /* set the maximum available width of entry fields */
Here is what the widgets will look like on full screen:
With a maximum width:
On a phone screen:
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 widget
2. Add rounded corners to input fields
/* copy the rounding radius to ensure cross-browser compatibility */