How to create a widget

Quickly add social media sharing widgets from many providers


  1. Create A Widget
  2. Editor Overview
  3. Configure Widget
  4. Install On Your Site
  5. Activate, Deactivate or Delete A Widget

Create A Widget

All your widgets are listed under the configurations tab available in the top navigation bar. Click on the + New Widget button to create a new widget.

Configurations Tab

The click action will take you to a screen where you can select the widget category and widget style. Select Social Sharing Tool under the Growth Tools listed in the left pane followed by any style in the right pane.

New Share Widget

Please Note: You can later change the widget style in the editor only before creating the widget.

Editor Overview

Widget Configuration Screen

Your sharing widget editor is majorly divided into 5 sections:

1. Widget Display Style

These are the available styles for a sharing widget Inline, Floating, and Popup.


Display the share buttons in a horizontal layout. This is useful when the widget needs to be rendered alongside your page content. For example, the top or bottom of a blog post.

Since the widget is rendered inside your content, you need to specify a location in your page to position the widget. You can read more about it in the rules section.

By default, it is rendered under <div class="s9-widget-wrapper"></div>.


Display the share buttons in a vertical layout. It is useful when you want your sharing widget to just float on the page i.e. either in left or right.

Unlike an inline style, it requires no additional changes to your content and can be completely configured via the console.

Display the share buttons in a popup that can be completely configured via the console.

2. Widget Configuration Tabs

All of the widget configuration parameters are dynamically segregated into tabs based on the selected widget style.

For example, a widget with inline or floating style can implement Counters where as popup can not.

Also, you'll see a red indicator on the respective tab when there is an error in your configuration.

3. Widget Configuration Editor

This section dynamically displays the configuration fields as one of the tabs is selected.

4. Widget Preview Pane

Here you can see a preview of the widget based on your configuration. This is an exact replica of how it would look like in your site.

5. Widget Preview Size Selector

This option allows you to preview the configured widget in a different device screen i.e. Desktop or Mobile.

Configure Widget

Select a widget style to proceed


Install On Your Site

This is just a one-time process. Please select your frontend technology from the list below.

  1. WordPress
  2. Magento
  3. Tumbler
  4. Gatsby
  5. Blogger
  6. HTML

Activate, Deactivate or Delete A Widget

A newly create widget is by default in active state. So this will be rendered in your site if Social9 is installed.


If you wish to temporarily remove it from all your sites without changing any URL visibility rules configuration, you can deactivate it by clicking the Deactivate button under the options menu in your configuration section as shown in the picture below.

Deactivate a widget


Similarly, inorder to activate a widget simply open the options menu and click on Activate under the configuration section.

Activate a widget


Now, if you wish to get rid of the widget completely, simply click on the Delete button under the options menu in the configuration section.

Delete a widget

A Note About Deletion

This action can not be un-done. So delete the widget only if you're certain about the action.

In case you've deleted a widget by mistake, please contact Social9 support.