ContentForge

Social Icons, Share and WhatsApp widget settings

Link to your social profiles, let visitors share a page, or add a WhatsApp chat button (floating or inline), with every option in their windows and Design panels.

Updated October 15, 2026

Three widgets that connect visitors to your social channels. Social Icons (in Navigation) links to your profiles. Share (in Navigation) lets visitors share the page they're on. WhatsApp (in Business) opens a WhatsApp chat with you.

Spacing, Animations & Effects and Position are explained once in Widget design panel basics and Animations and effects.

How to add one

  1. Open the editor and click Add.
  2. Drag Social Icons or Share (under Navigation), or WhatsApp (under Business), onto the page.
  3. Click Manage Icons, Share Settings or Manage WhatsApp in the toolbar.
  4. Open Design for the look.

Social Icons

By default it reads your profiles from Business Info, so you usually only pick which icons to show.

Manage Icons

  • Choose your icons: click to turn icons on or off. Facebook, X, Instagram, YouTube, TikTok, Pinterest, Yelp, Google, Google Maps, WhatsApp, Vimeo, Snapchat, Reddit, Tripadvisor, Flickr, Foursquare, RSS, Threads, Nextdoor, Houzz, Thumbtack, Bluesky, LinkedIn, Email and Phone. A new widget starts with Facebook, X and YouTube.
  • Links, in display order: reorder with Move up / Move down, take one off with Remove.
    • Each icon has a link box. Leave it blank to use the link from Business Info (the box says "Using Business Info: …"). Email and Phone use the first email and phone in Business Info.
    • If there's no link here or in Business Info you'll see "No link — add one here or in Business Info. Hidden on the live site until then."
  • Add custom icon: your own image with an Icon label ("Label (e.g. Blog)") and a link.
  • Open links in a new tab: on by default.
  • Click Done.

Layout

  • Icon style: Brand circles (default), Brand squares, Brand icons, Solid circles, Outline circles or Plain icons. Brand styles use each network's own color.
  • Color: one color for every icon (the last three styles only).
  • Icon color: the symbol inside the circle (Solid circles only).

Style

  • Alignment and distribution: Left, Center (default), Right, Spread or Even, per screen size.
  • Icon size: 12–96px, per screen size. Default 44px.
  • Space between icons: 0–80px, per screen size. Default 8px.
  • Hover effect (desktop): None, Zoom out, Opacity, Float, Forward, Grayscale, Reverse grayscale, Blur or Blur and grayscale.

Spacing, Animations & Effects

Margin, plus Entrance and Scroll animations.

Share

Share buttons for the page the visitor is on.

Share Settings

The window is called Share.

  • Title: text such as "Share" shown with the buttons. Turn on Show to display it. Off by default.
  • Show Facebook, Show X (Twitter), Show LinkedIn, Show WhatsApp, Show Email: all on by default.
  • Visitors share the page they're on. The preview image and text come from the page's SEO settings (see Page SEO settings).

Design

The same Layout and Style sections as Social Icons (icon style, colors, alignment, size, spacing, hover effect). A new Share widget starts at 36px icons with Zoom out on hover. When the title is shown, a Title section adds the text style group (size up to 48px). Then Spacing and Animations & Effects (Entrance and Scroll).

WhatsApp

Manage WhatsApp

The window is called WhatsApp.

  • Your WhatsApp number (with country code): leave blank to use the phone in Business Info. US numbers without a country code get +1. Visitors can see this number.
  • Default message (optional): the message that's ready to send when the chat opens, for example "Hello. I visited your site. Could you please get back to me?"
  • Alt text: what screen readers say. Default "Message us on WhatsApp".
  • Button text (only for the Button with text style): default "Chat with us".

On phones the button opens the WhatsApp app; on computers it opens WhatsApp Web.

Layout

  • Style: Circle (default), Rounded square, Icon only or Button with text.
  • Size (or Height for Button with text): 24–160px, per screen size. Default 60px.
  • Alignment: Left (default), Center or Right, per screen size.

Spacing, Animations & Effects

Margin, plus Entrance and Scroll animations.

Position

  • Position type: Default (sits on the page) or Floating (pinned to the screen). There's no Sticky.
  • Floating: Pin to (a 3×3 grid, default bottom right), Horizontal offset and Vertical offset (0–200px, default 24), and Layer (z-index) (1–999, default 50).
  • Show on every page (once it floats): one copy kept with the footer, shown on every page, with Except these pages. You need a footer on the site for this.
  • Position can be set per screen size.

WhatsApp clicks are counted in the Site Dashboard under Engagement (see Site dashboard).

Examples

  • Header socials: Social Icons with Plain icons, white Color, Icon size 20 and Opacity on hover, on a dark header.
  • Blog post sharing: a Share widget under each post with Show title "Share this post" and only Facebook, LinkedIn and Email on.
  • Chat button on every page: WhatsApp, Circle, Floating, pinned bottom right, with Show on every page on and the Contact page unticked under Except these pages.
  • "Text us" button in a hero: WhatsApp, Button with text, Button text "WhatsApp us", Default message "Hi, I'd like a quote".

Limits and what it can't do

  • An icon with no link (here or in Business Info) is hidden on the live site.
  • Share always shares the current page. It can't share a different link.
  • The Share preview comes from the page's SEO settings, not from the widget.
  • WhatsApp opens a chat with one number. For several numbers, use several widgets.
  • These widgets can't use Connect to Data.

Who can use it

Anyone with the Mount Olympus tool on the agency team. Client people need Editor to add, move or style these widgets, or Widget content to change the icons, share buttons or WhatsApp details.

Troubleshooting

  • An icon shows in the editor but not on the live site: it has no link. Add one in Manage Icons or in Business Info.
  • The icons link to the wrong profile: a link typed in Manage Icons wins over Business Info. Clear it to use Business Info again.
  • "All share buttons are off — turn some on in Share Settings.": every network is off. Turn at least one on.
  • The shared preview shows the wrong image or text: change the page's SEO title, description and social image, then republish.
  • WhatsApp opens the wrong number: check the country code. Without one, the number is treated as a US number (+1).
  • The floating WhatsApp button covers the cookie banner or chat: change Pin to, the offsets, or Layer (z-index).
  • "Show on every page" is grayed out: "Add a footer to the site first: elements shown on every page are kept with the footer."

Related articles

Business Info and Business Text explained

Keep the business name, contact details, hours, locations, social links and reusable text in one place, so every connected widget and the site's schema stay up to date.

How a widget's Design panel works

The parts every widget's Design panel shares - Spacing, Position, Visibility, Grid Position, text styles, hover chips, per-screen-size values, Manage windows and Connect to Data.

How to add animations and effects to widgets

Use the Animations & Effects section to add entrance animations, scroll effects and hover effects to any widget, section or column, and stagger a box's widgets.

How to set up the header, footer and navigation

Pick header and footer layouts, manage menu links and mega menus, design the mobile menu, and make the header sticky or overlap the first section.

How to set page SEO and meta tags

Set each page's SEO title, description, social image, canonical URL, No index and schema, edit every page at once in Page SEO and Blog SEO, and let Zeus write missing meta tags for free.

Didn't find what you need?

Send us a message — no sign-in needed — or email support@the-contentforge.com. Already a customer? Sign in to submit a ticket.

Contact support