Social Share
  • 04 Jan 2023
  • 1 Minute to read
  • Contributors
  • Dark
    Light

Social Share

  • Dark
    Light

Article summary

The Share-Control is essentially a button with a fixed click behaviour. Based on the chosen platform it changes it's default design and opens the respective 'Share window' when clicked.

Only on published Product configurator

The share functionality is only available in published configurators.

Styling

Default buttons appareance

SocialShareButtons.png
It's recommended to use the default styling to preserve it across all platforms and be safe for future updates.

Small design changes

Some changes are specifically supported without the need to overrule the CSS:

  • Text only: Set Show icon to false
  • Icon only: Remove Value
  • Width/Height: The content stays centered and the icon resizes to some extent

Also the whole hover effects can be disabled by simply removing the CSS class default-hover.

Blank button

If a totally different design is required, a blank button can be aquired with the following steps:

  • Value: remove content
  • Show icon: set to false
  • CSS Class: remove class "default-hover"

Afterwards it can be designed like any other button with background images, custom css-rules, etc.

Share options

By default all the relevant values in the properties are provided as so called "Open Graph Meta Tags" or in short "og-Tags". Most platforms process those tags but the result can differ between every platform.
It's recommended to fill all properties with valid content to get the best result, even though some properties aren't visible to the user (like author).

Graphic: Name of a Graphic-Component

Embed Url: Base Url where the Configurator is embedded. The Share-Link will be appended automatically.

Known behaviour

The behaviour highly depends on the implementation of the respective platform. This means that the following table may not be up to date or it gets changed from time to time.

✓ Part of the post/message (maybe shown a second time in the preview)

○ Visible but not directly in the post/message (e.g. as part of the preview)

✖ Not Visible

TitleDescriptionGraphic/Preview
Facebook
Pinterest
Twitter✓ (may load with delay)
LinkedIn
WhatsApp✓ (may load with delay)

Was this article helpful?