Customize the Ad Badge

How do I adjust the background color of the Ad Badge?

To adjust the background in the "Sponsored" text, you'll need to do the following:

1. Select a color option via RGBA.
2. Before the Firework Embed code, insert the following script: fw-embed-feed {
   
   --fw-ad-badge-background: rgba
3. After the "rgba" script, enter in your RGBA colors then close out the script with * Custom "Sponsored" badge background */. Here is an example: fw-embed-feed {
   
   --fw-ad-badge-background: rgba(175, 175, 175, 0.8); * Custom "Sponsored" badge background */

How do I adjust the font style of the Ad Badge?

Leveraging Google Fonts will help here!

1. Simply select the font style you'd like to use from Google Fonts.
2. Copy the "@import" code from Google Fonts to insert before the Firework Embed code. Example below: <style>
   @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');

How do I adjust the font color of the Ad Badge?

1. Select a color option via RGBA.
2. Before the Firework Embed code, insert the following script: fw-embed-feed {
   
   --fw-ad-badge-font-color: rgba
3. After the "rgba" script, enter in your RGBA colors then close out the script with * Custom "Sponsored" badge font color*/. Here is an example:
   --fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* Custom "Sponsored" badge font color */
4. Finally set the background to "transparent" and enter in your font style. For example:
   --fw-storyblock-background: transparent;
   
   --fw-font-family: "Roboto Slab", serif;

Here is an example HTML script with the above adjustments to help visualize.

<script async type="text/javascript" src="//asset.fwpub1.com/js/embed-feed.js"></script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');
fw-embed-feed {
--fw-ad-badge-background: rgba(175, 175, 175, 0.8); /* Custom "Sponsored" badge background */
--fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* Custom "Sponsored" badge font color */
--fw-storyblock-background: transparent;
--fw-font-family: "Roboto Slab", serif;
}
</style>
<fw-embed-feed
channel="playlist"
playlist="oyrAAg"
mode="row"
open_in="default"
max_videos="0"
placement="middle"
branding="false"
player_placement="bottom-right"
></fw-embed-feed>