The most common scenario that anyone would want to change these copies is for translation reasons. Sometimes you don't want your Facebook button to say "share" but "Compartir" (Spanish).

So, here's how you can control the copies:

If you are using the Embed Form Widget, use the following rules in the Custom CSS option that's provided inside the Customization of the Widget:

.sharebtn {
     font-size: 0px;
}
 .fa {
     margin: 0 4px;
}
 .fa.fa-facebook::after {
     content: "facebook";
     font-size: 15px;
     margin: 0 10px;
}
 .fa.fa-twitter::after {
     content: "twitter";
     font-size: 15px;
     margin: 0 10px;
}
 .fa.fa-envelope::after {
     content: "email";
     font-size: 15px;
     margin: 0 15px;
}
 .fa.fa-reddit-alien::after {
     content: "reddit";
     font-size: 15px;
     margin: 0 15px;
}
 .fa.fa-whatsapp::after {
     content: "whatsapp";
     font-size: 15px;
     margin: 0 10px;
}

Note: Replace the word inside the "--" of each sharing option with the desired word.

Important Note: The above does not include the Messenger sharing option, because its text cannot be edited, thus we recommend disabling it.

What if I'm using the Tempting/Leaderboard Giveaway or the Startup Prelaunch  template (aka popups)?

If you're using the popup templates, you can take use the following rules:

.vlns .vl-vrlps-popup .vl-btn-social {
     font-size:0px!important;
     display:block;
     height:30px!important;
     padding-left: 60px !important;
     padding-right:60px !important;
}
 .fa {
     font-size: 15px!important;
     line-height:15px !important;
}
 .vlns .vl-btn-social > :first-child {
     top:5px !important;
     left:5px !important;
}
 .fa.fa-facebook::after {
     content: "facebook";
     font-size: 14px!important;
     margin: 0 10px;
     line-height:15px !important;
}
 .fa.fa-twitter::after {
     content: "twitter";
     font-size: 14px!important;
     margin: 0 13px;
     line-height:15px !important;
}
 .fa.fa-envelope::after {
     content: "email";
     font-size: 14px!important;
     margin: 0 14px;
     line-height:15px !important;
}
 .fa.fa-reddit::after {
     content: "reddit";
     font-size: 14px!important;
     margin: 0 10px;
     line-height:15px !important;
}
 .fa.fa-whatsapp::after {
     content: "whats";
     font-size: 14px!important;
     margin: 0 14px;
     line-height:15px !important;
}


But Helena, the popup templates do not have a Custom CSS option in the Wizard...

That is correct, thus the above will not work with a Viral Loops landing page. If, on the other hand, you are not using a Viral Loops landing page, you can take a look at the following article on how to Customize the Viral Loops pop-up and insert the above rules to change the content of the sharing options.

Was this article helpful? Let us know!

Did this answer your question?