How to Create a Custom SEMRush Lead Gen Widget in Webflow

As a business owner, you know that acquiring new leads is crucial to your success. But generating leads can be tricky – especially if you don't have the time or resources to do it yourself. SEMRush, one of the world's leading SEO tools, provides a widget that lets users receive a website audit in exchange for their email address.

While the widget is functional and can be used straight out of the box, the design is plain and outdated. Luckily, for those wanting to create a custom widget that matches the rest of your site, we can create a widget in Webflow that uses the functionality of SEMRush's widget.

It's the best of both worlds.

In this guide, we will show you how to create a beautiful, custom lead generation widget using SEMRush's code so that you can acquire new leads without compromising on design.

How to Create a Custom SEMRush Lead Generation Widget in Webflow

1. Build your form in Webflow
2. Configure the SEMRush lead generation widget
3. Gather the required API parameters
4. Configure the Webflow Form
5. Create the AJAX request
6. Test your widget

If you'd like, you can also watch the video version of this article below.

‍1. Build your form in Webflow

Creating a custom lead generation widget on Webflow is extremely easy, and only takes a few minutes. If you're already experienced with Webflow, this should be a breeze.

First, drag and drop a Form Block where you would like your lead generation widget to be.

Next, make sure you have four inputs:

• Plain Text for Email Address
• Plain Text for Domain
• Plain Text for Widget API Key
• Checkbox for Terms of Service Agreement
  

Additionally, make sure your form has a Submit button.

‍
Feel free to style your form however you like.

2. Configure the SEMRush lead generation widget

First, head over to SEMRush and create an account if you don't already have one. You need to have a paid subscription tier to use the widget. If you're a web design or SEO agency, the SEMRush platform on its own is an amazing deal.

‍
Once you're logged into SEMRush, use the sidebar to scroll down to the bottom and click on the "Lead Generation Tool" sidebar item. Now, you should be able to see some widget settings, along with the widget preview and widget code itself.

If you've never used the widget before, adjust the settings to your liking on the left side of the Lead Generation Tool tab. Anything appearance-related will not carry over, so unless you plan on using the default styling, don't worry about the design-related settings.

3. Gather the required API parameters

First, we need the URL of SEMRush's Leads API endpoint. You can get this one of two ways: either by pasting SEMRush's provided widget code into your site and then inspecting the form or by using the URL below that I have retrieved for you.

https://api.semrush.com/management/v2/leadgen/leads

While this URL is not unique to any site or account, you'll still need your unique API key to access and use the API.

If you want to verify that this is still the correct URL, you'll need to open the Network tab of the Chrome DevTools, then make a request, and inspect for an outbound request. On the request details, you'll see the endpoint. This is explained in our video.

Once we have the API endpoint, we need to grab our API key.

Look in the default widget code on SEMRush, and scan it for a key called "widgetApiKey." Next to that key should be a value containing your API widget in a string.

This will look like a scrambled bit of letters and numbers. Copy the gibberish that's inside the quotes (but not the quotes themselves) and paste it into a safe place.

Now, we're ready to configure our Webflow form.

4. Configure the Webflow form

SEMRush's API expects four values in order to have a successful request. In order to send these four values in a way that the server expects, we need to configure our Webflow form.

Configure the Form

In Webflow, select the Form Block element. In the Element Settings panel, under the "Forms Settings" section, set the "Action" value to the SEMRush API endpoint URL mentioned above. Set the method to POST.

Configure the email field

Select the email input. In the Element Settings panel, under the "Text Field Settings" section, set Name to "email" (lowercase, no quotes), set Type to Email, and set Required to true.

Configure the URL field

Select the URL input. In the Element Settings panel, under the "Text Field Settings" section, set Name to "domain", set Type to Plain, and set Required to true.

Configure the API Key field.

Select the API key field. In the Element Settings panel, under the "Text Field Settings" section, set Name to "widgetApiKey", set Type to Plain, and set Required to true. Make sure that the ID of the field is exactly equal to the name, "widgetApiKey." Hide the element using display: none; or add a hidden utility class. We want to include this hidden input as part of our form, but not display it.

Configure the Checkbox field

Select the Checkbox field. In the Element Settings panel, under the "Checkbox Settings" section, set Name to "agree", set Style to Default, and set Required and Start Checked both to true. Make sure the ID of the actual checkbox input is set to "agree".

Depending on the privacy laws in your state/province/country, you may want to keep the Agreement checkbox visible, since you're likely going to use this email for marketing.

Customize Error and Success states

Customize the included Success and Error messages to your liking. We'll use these error and success states to show the user the status of their audit.

Add a loading state (optional)

Inside your "form" div (the Form Block's first child) you can also add a loading state.

On our widget, we included a Lottie animation and some text indicating to the user that their site is being audited. By default, you should hide this loading state. Attach an interaction to your Submit button that shows the loading div when the button is clicked.

Our AJAX request (which we'll add in the next step) will not display anything until we receive an error or success message back from the server. As a result, it's important to display a loading state to the user to inform them that the request is processing.

When we've received a success message from the server, the "Form" div (again, the Form Block's first child where all your inputs live) will be set to hidden, so that's why we include the loading state inside the "Form" div.

Remember the class name of this loading state div, because we'll have to manually hide it if the request errors out.

If desired, feel free to verify that your widget is structured properly by looking at the structure of the widget on our site.

5. Create the AJAX request

AJAX is a web development technique used to make requests to a server without having to refresh the page. This is what we'll use to send our form data off to SEMRush's API so that they can create the audit and send it to the user, while also storing their email address and website URL in the SEMRush Leads dashboard.

If you're not familiar with AJAX, don't worry. We've provided the code below that you can simply copy and paste into your Webflow site. All you need to do is modify a few lines so that it works with your specific form.

All of the following code needs to go in the "Before </body> tag" custom code section of your page settings. Each code snippet is already in JavaScript, so all three custom code blocks need to be inclosed with <script> tags.

First, we need to set the widgetApiKey input field to your API key, as well as pre-check the "agree" checkbox if you're not leaving that up to users. If you're making your checkbox visible to users, remove the second line of code. Otherwise, copy the two lines of code below and replace the placeholder with your SEMRush widget API key.

Next, you'll need to paste the following below setup code. This is a function used in the AJAX request (which we add next) that converts the form's data into JSON so it can be accepted and decoded by the server.

After we add that, we're ready to make our AJAX request.

Once all your scripts are pasted and enclosed in <script> tags, verify that there are no placeholders in the script code. If you've added a loading state, look in the "error" part of the AJAX request and ensure that you've added your loading state class.

Now, you're ready to test!

6. Test your widget

Publish your website, then open it in a new tab. Enter your email address and website URL, then click the submit button. If everything is working properly, you should see the loading state appear for a few seconds (it may be up to a minute) and then either an error message or success message.

In your SEMRush dashboard, where you retrieved the code for the widget, there's a tab called "Leads" to the right of the "Widget Settings" tab up at the top of the page. You should see your email address and website URL there. You'll also receive an email at the address specified in the Widget settings.

If you're getting errors, you can use Chrome DevTools Console to debug your code. The most common error is that the API key isn't set properly, but other errors may be caused by incorrect form field names. Double-check that everything is inputted correctly and that all placeholders in the supplied code are filled out.

Conclusion

Great job! You've now successfully built a custom lead generation widget for your Webflow site using the SEMRush API. This guide walks you through how to build a basic widget, but there's a lot of room for customization.

If you're looking for an OKC web designer to help you set up a custom lead generation widget, tell us about your project.

If this guide helped you, please share it on social media using the links below.

If you run into any issues integrating the widget, we'd be happy to help. Click here to contact us and drop us a line and we'll do our best to help you out.

Until next time, happy Webflowing!

The Steelman Digital Team