Skip to content
Documentation
FacebookYouTubeX (Twitter)

Custom widget style

In this tutorial we will show you a simple tutorial of how to override the default style of the widget icon, and how to add a simple animation on hover event on the same element.

You can use this example to override and change every element of the widget and customize it as you want. Simply remember to subscribe to ‘onInit’ native Pingstreams event and append style to the end of the already loaded files.

Here is a preview of the custom launcher icon override:

Custom launcher icon preview

Here is the full code example:

<html>
<head>
<script type="application/javascript">
var PROJECT_ID = "<<PINGSTREAMS_PROJECT_ID>>"
window.pingstreamsSettings =
{
projectid: PROJECT_ID,
};
(function (d, s, id) {
var w = window; var d = document; var i = function () {i.c(arguments);};
i.q = []; i.c = function (args) {i.q.push(args);}; w.Pingstreams = i;
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id; js.async = true; js.src = "https://widget.pingstreams.com/v6/launch.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'pingstreams-jssdk'));

window.Pingstreams('onInit', function (event_data) {
var iframePingstreams = document.getElementById("pingstream iframe");
var style = iframePingstreams.contentWindow.document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.message_innerhtml.marked { font-size: 17px!important;}\n';

//add custom style to launcher-button (image + border + background-image)
style.innerHTML += '#c21-launcher-button > div > svg { display: none !important; }\n';
style.innerHTML += '#c21-launcher-button .launcher-button { background-image: url("https://panel.pingstreams.com/assets/img/avatar_bot_pingstreams.svg"); background-repeat: no-repeat;}\n';
style.innerHTML += '#c21-launcher-button { padding: 6px;background-color:unset !important; border: 1px solid rgb(182, 20, 22);}\n';

//add custom animation to launcher button on hover
style.innerHTML += '#c21-launcher-button .launcher-button:hover { animation: fade-in 1.2s ease-in both;}'
style.innerHTML += '@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }'

iframePingstreams.contentWindow.document.getElementsByTagName('head')[0].appendChild(style);
})
</script>
</head>
<body>
This Pingstreams example will change the default style of widget launcher icon and add a simple animation when hovering over it
</body>
</html>

Key Customization Features

Section titled “Key Customization Features”

Launcher Button Styling

Section titled “Launcher Button Styling”
  • Hide default SVG icon: display: none on the default SVG
  • Custom background image: Set your own launcher icon
  • Border and padding: Customize the button appearance
  • Hover animations: Add CSS animations for interactive feedback

Message Styling

Section titled “Message Styling”
  • Font customization: Modify message text appearance
  • Custom CSS: Apply any CSS styling to widget elements

Implementation Notes

Section titled “Implementation Notes”
  1. Wait for initialization: Use the onInit event to ensure the widget is fully loaded
  2. Access iframe content: The widget runs in an iframe, so access its content window
  3. Dynamic styling: Styles are applied programmatically after widget load
  4. Cross-browser compatibility: Include vendor prefixes for animations

This approach allows you to completely customize the visual appearance of your Pingstreams widget while maintaining its functionality.