Social Media
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.
Property | Default Value |
|---|---|
icons | |
spacing |
|
align |
|
containerPadding |
|
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 over 1 year ago