Custom Alert Overlay

You can customize the appearance of the SociaBuzz Alert overlay to your liking, using your own HTML & CSS, to make your live stream more interesting.

How to customize the appearance of the SociaBuzz Alert:

1. Login to your SociaBuzz account
2. Click “Overlay Live Streaming” on the TRIBE feature
3. On the “Alert” overlay page, click “Custom” (to the right of “Style 2”)
4. Enter your own HTML & CSS

---

HTML:

• In the HTML field you can specify the HTML structure that will be displayed when the Alert appears
• Various tokens are available that will automatically be filled with actual data when the Alert appears

Token	Displays data	Actual data example
{amount}	Money given by supporters	USD100
{from_text}	Text between the amount of money & supporters	from
{supporter}	Supporter name	John Doe
{message}	Message from supporter	Keep up the good work
{media}	Image/GIF media URL	<img src=”https://example.com/image.jpg” />

HTML Example:

<div class="alert">
  <img src="{media}" class="media" />
  <p class="template">
    <span class="wiggle">{amount}</span> <span class="from">{from_text}</span>
    <span class="wiggle">{supporter}</span>
  </p>
  <p class="message">{message}</p>
</div>

---

CSS:

Use CSS to customize the appearance to your liking. You can adjust the font, color, animation, size, etc.

CSS Example:

@import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap);
.alert {
    font-family: Open Sans !important;
    font-weight: 800;
    text-align: center;
    padding-top: 10px;
    text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000
}
.media {
    height: 100%;
    width: 100%;
 border-radius: 10px;
    margin-bottom: 14px
}

.template {
    font-size: 1.7rem !important
}

.wiggle {
    color: #0f0 !important;
    display: inline-block;
    animation: .5s infinite wiggle
}
.from {
    color: #eee !important
}
.message {
    line-height: 1.5;
    padding: 10px;
    font-weight: bolder !important;
    color: #ff0 !important;
    opacity: 1;
    font-size: 1.51rem !important
}



@keyframes wiggle {
    0%,
    100%,
    80% {
        transform: rotate(0)
    }
    85% {
        transform: rotate(5deg)
    }
    95% {
        transform: rotate(-5deg)
    }
}

---

Usage Tips:

• Use tokens exactly as in the table (including the brackets {})
• Make sure your HTML structure is valid
• Use CSS animation to make it look more attractive
• Do the “Test Alert” before use
• After updating HTML & CSS, refresh browser source cache in your streaming software