> For the complete documentation index, see [llms.txt](https://docs.superpowerups.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.superpowerups.com/player-snips-1/the-snips/content-snips/callout-with-button-on-side.md).

# Callout With Button on Side

PS-003 - This Player Snip has a colored background with a heading and summary and call to action (placed on the side)

<figure><img src="https://793178012-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDwG1CumOmKfeNNqsVUXG%2Fuploads%2Fgit-blob-9cf1f30b97407dbaa94122616c5ad99eb928dc63%2F164072custom_site_themesidhtu3VI.jpeg?alt=media" alt=""><figcaption></figcaption></figure>

**Adding this Player Snip**

* [ ] On your [`My Player Snips Page`](/player-snips-1/how-to-guides.md#how-to-create-a-my-snips-page) add the **`PS-003`** section to your page
* [ ] **Open up the section's `Headings` settings group** and modify the text settings
* [ ] Open the section's **`Call To Action` settings group** and modify the options. If you do not want to use a button, then remove the button text
* [ ] Optionally open the section's **`Color`** settings group and change the *Color Mode Option* to `Custom` if you wish to control the color combinations
* [ ] Hover over the section and click the **`Copy Player Snip`** button
* [ ] In another tab **open your course curriculum** and find the lesson you wish to place this Player Snip into
* [ ] Put your cursor in the location that you wish to place this snippet
* [ ] Open up the < > code viewer
* [ ] Paste the snippet
* [ ] Click the < > code button to return to the normal preview
* [ ] Click Save to save the lesson
* [ ] Preview the lesson inside the course player

{% hint style="info" %}
The button color is automatically using the same "brand color" you have set for this course. It will be the same color you see for the complete and continue button.
{% endhint %}

##