Customize the Ad Badge

Learn how to customize the Ad Badge displayed on your video.

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:

Select a color option via RGBA.
Before the Firework Embed code, insert the following script:
```
fw-embed-feed {

  --fw-ad-badge-background: rgba
```
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!

Simply select the font style you'd like to use from Google Fonts.
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?

Select a color option via RGBA.
Before the Firework Embed code, insert the following script:
```
fw-embed-feed {

--fw-ad-badge-font-color:  rgba
```
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 */
```

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>