Back to Help Center
dsd customization

DSD Widget

The DSD Widget allows you to create a website component that encourages your visitors to use your Dedicated SEO Dashboard. It’s a standalone feature that can be added to any website. You can create it as a modal window or static block and embed it into your main website. The best part is that you don’t even need to call on any developers to do this. Simply copy and paste the code block, and you’re good to go.


The DSD Widget is designed to drive leads to your SEO Dashboard. Here’s how it works:

  • The visitor enters a domain name into a special field, clicks a button, and moves on to their website analysis at your Dedicated SEO Dashboard.

  • The analysis starts automatically.

  • The visitor receives the results of their website analysis, and you get a new lead.

Create as many widgets as you need. The DSD Widget is fully customizable. You can even choose any section of your SEO Dashboard to direct the visitor to (Keywords in TOP, Best Pages, Webpage Analyzer, etc.). Also, you can edit text, change colors, and customize the appearance of your widgets.

What the DSD Widget looks like on your website

There are two DSD Widget types:


1. Modal window

You can choose when a modal window pops up on your site. There’s a button that triggers it so that you can easily place it.



2. Static block

A static block is always shown on your web page.

How the DSD Widget works

To turn a visitor into a lead, you want to give them something that can benefit them. That’s when a free SEO website analysis comes in. The DSD Widget helps you take your visitors to your DSD as they navigate your website.

Stage 1. Your potential client lands on your website and learns they can get a free website analysis.

Stage 2. Your client enters the domain name or URL into a special widget field.

Stage 3. The widget redirects your client to the target page of your SEO Dashboard, where the analysis starts automatically.

Stage 4. Your client then receives the analysis result, which acts as a trigger. They will most likely create an account to save their project. That’s how you get a new lead and a reason to contact them to offer your services.

How to create and customize your DSD Widget?

Open your DSD Admin Panel in your browser and go to the Settings => Widgets Settings. Click the “Create Widget” button.

Step 1: Create your widget


Customize what your widget looks like.

Here you can find some parameters. They are already filled with default values that you can safely use straight out of the box or change.

  • Title – Enter the title text.

  • Subtitle – Enter the subtitle text.

  • Language – Used to display the translated versions of standard texts.

  • Target DSD page – This is the section of your SEO Dashboard that the visitor will be redirected to after entering a domain name or URL in the widget field.

  • Widget format – Settle on a modal window or a static block.

  • Button text – Edit the call-to-action button text.

  • Button color – Select a button color that goes with your website colors.

  • Input and buttons – Select a rounded or square design to fit the widget into your website design.

Customize where and when your widget shows up.

If you opt for a modal window, you can choose where and when you want it to appear on your web page.

  • Position – Choose where exactly your modal window pops up on your page.

  • Show pop-up after (seconds) – Set the timer for displaying your pop-up. If you want your modal window to appear immediately upon opening the page, set the value to “0”. 

  • Show pop-up on button click – Place a button on your site that triggers the DSD Widget pop-up if clicked. 

If you have some coding skills, you can create your own triggers to display the DSD Widget pop-up on your website.


Once you’re done with all the settings, click the “Generate and Save” button.

Step 2: Install the widget on your website


Now that your widget is created, you can copy its code.

  • If you’re going with a modal window, paste the code before the closing </body> tag on every web page you want this pop-up to appear on.

  • If you’re going with a static block, put the code in any noticeable place on your web page.

Step 3: Add the button


If you’ve decided to create a button to trigger your pop-up, copy and paste its code into your web page code wherever you want this button to show up.

Advanced Options

If you’re no stranger to coding, you can set pop-up display rules on your own.


JavaScript function to display the pop-up:

window.smtWidget.show('smtWidget97')


smtWidget97 is a value of the data-id attribute of the widget HTML block.


Pop-up callbacks:

window.smtWidget.onOpen = function(el){}

Specifies the function that needs to be run when the pop-up is opened.

window.smtWidget.onClose = function(el){}

Specifies the function that needs to be run when the pop-up is closed.

window.smtWidget.onSummitClick = function(val,ev){}

Specifies the function that needs to be run when the submit button is clicked.


Pop-up display event:

document.addEventListener('smtWidgetPopupShow', (ev) => {})


My Widgets

All your saved widgets can be found on the “My Widgets” page. You can reuse, edit, or delete them at any time. To copy the code of your widget, click the button in the “Code” column.


Please note: Even if you remove the widget from this list, it will still be displayed on your website. 

How to remove the DSD Widget from your website?

If you no longer want the DSD Widget to show up on your website, remove the widget code (and the button, if installed) from your web page code.