Social Sharing Widget

The Social Sharing widget is part of the Special widget category. For more information on the widgets, please refer to Widgets configuration in the visual editor.

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. 

Configuration

Layout tab

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

Content tab

Select the social platform(s) you would like to invite your visitors to share on.
The following are available: Facebook, Whatsapp, X, Threads, Telegram, Reddit, LinkedIn, Pinterest and Email.

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.
You can also write your own message to accompany the link. For example, if you have bought a product on a website and want to share it with your friends on Whatsapp, you can write the following message: "Look what I just bought!". Your friends will thus receive on Whatsapp a link to the product page following your message.

Style tab

  • 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, 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?

/