Social Sharing Widget

The Social Sharing widget is part of the Special widget category. For more information on the widgets, please refer to Widgets Set-up Guide.

 

Introduction

The Social Sharing widget lets you display a sidebar (left, right, top, bottom of the page) on pages where you would like your visitors to share content on social media or via email. 

 

Layout tab

121.png

Pick the layout that suits you best depending on the design of your web app.

  

Content tab

122.png

 

Select the social platform(s) you would like to invite your visitors to share on.

The following are available: Facebook, Twitter, Telegram, LinkedIn, and Pinterest.

By default, "Email" is toggled; it will add a button with a "mailto:" link. 

The email subject will be the meta title of the page and the email body will be the URL of the page. 

"mailto:" links behave differently depending on whether you have set a default email client for "mailto:" links in your browser settings; and if you have, it differs depending on whether you use: Thunderbird, Outlook, Mail, Gmail, Proton Mail, etc.

 

Style tab

123.png

  • The Icons color will be applied to all icons. By default they are white.
  • The Customize icon background color, once toggled, will be applied to all icons. By default (untoggled) they are based on the color of the social media platform: light blue for Twitter, red for Pinterest, etc.

  • Display a drop shadow & drop shadow blur radius. You can decide whether to have a drop shadow and how opaque it will be.

  • Margin between icons will add some margin between the buttons (vertical margin or horizontal margin, depending on the layout you picked).

  • Button border radius slider will give more or less border radius to the icon buttons.

  • Customize container: if you toggle this option, you will discover a list of sub-options (container padding, background color, border thickness (and border color is thickness is >= 1px) & border radius) which will let you design a sidebar to wrap the icons together.

  • The Container position on the axis slider will help position the sidebar, in particular if you already have static/sticky elements on your page so as to avoid overlapping. By default it is set to 50, which means centered (vertically or horizontally (@ 50%) depending on the layout you picked).

Was this article helpful?

/