GuidesChangelogAPI ReferenceExamplesStatus

Social Media

Suggest Edits

🚧

Premium Tool

This tool is only available as an add-on in premium plans.

Social Media is a built-in tool that lets users add their social media icons to an email or web page.

Enable / Disable

unlayer.init({
  tools: {
    social: {
      enabled: false
    }
  }
});

Default Values

Social Media tool comes with the following default values. You can choose to change any of these.

PropertyDefault Value
icons[]
spacing5
aligncenter
containerPadding10px

Here are a few examples on how to change these default values.

Icons

You can set the social media tool to come with default social networks and their URLs pre-filled.

unlayer.init({
  tools: {
    social: {
      properties: {
        icons: {
          value: {
            iconType: "squared",
            icons: [
              {name: "Facebook", url: "https://facebook.com/"},
              {name: "Twitter", url: "https://twitter.com/"},
            ]
          }
        }
      }
    }
  }
});

Icon Spacing

unlayer.init({
  tools: {
    social: {
      properties: {
        spacing: {
          value: 5
        }
      }
    }
  }
});

Alignment

unlayer.init({
  tools: {
    social: {
      properties: {
        align: {
          value: "center"
        }
      }
    }
  }
});

Container Padding

unlayer.init({
  tools: {
    social: {
      properties: {
        containerPadding: {
          value: "10px"
        }
      }
    }
  }
});

Custom Icons

Social media tool comes with a default set of social media networks. If you want to add a different social network, you can do that. Each custom icon must have an image url available for all icon types:

  • circle
  • circle-black
  • circle-white
  • rounded
  • rounded-black
  • squared
  • squared-black

Add New Icons

unlayer.init({
  tools: {
    social: {
      properties: {
        icons: {
          value: {
            editor: {
              data: {
                customIcons: [
                  {
                    name: 'Twitch',
                    url: 'https://twitch.tv/',
                    icons: {
                      'circle': 'https://cdn3.iconfinder.com/data/icons/popular-services-brands-vol-2/512/twitch-64.png',
                      'circle-black': 'https://cdn3.iconfinder.com/data/icons/popular-services-brands-vol-2/512/twitch-64.png',
                      'circle-white': 'https://cdn3.iconfinder.com/data/icons/popular-services-brands-vol-2/512/twitch-64.png',
                      'rounded': 'https://cdn3.iconfinder.com/data/icons/popular-services-brands-vol-2/512/twitch-64.png',
                      'rounded-black': 'https://cdn3.iconfinder.com/data/icons/popular-services-brands-vol-2/512/twitch-64.png',
                      'squared': 'https://cdn3.iconfinder.com/data/icons/popular-services-brands-vol-2/512/twitch-64.png',
                      'squared-black': 'https://cdn3.iconfinder.com/data/icons/popular-services-brands-vol-2/512/twitch-64.png',
                    }
                  }
                ]
              }
            }
          }
        }
      }
    }
  }
})

Turn Off Default

If you don't want the default icons to show and only show your custom ones, you can do that as well.

unlayer.init({
  tools: {
    social: {
      properties: {
        icons: {
          value: {
            editor: {
              data: {
                showDefaultIcons: false,
                customIcons: []
              }
            }
          }
        }
      }
    }
  }
})

Updated almost 2 years ago