# Customizing the CSAT widget

Keeping comes with 5 CSAT widgets that have been specially designed to work with most email systems. However, you may customize your own widget if you prefer your own design.

<figure><img src="https://1058495162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHa8WIsJ5Z5NqmPmq5VS%2Fuploads%2FqVXyyyJJ1jkQYNeZUIZM%2FChoose%20CSAT%20Widget.png?alt=media&#x26;token=cafdd3ee-3264-4708-a77e-d1c5fd2e2d1d" alt=""><figcaption><p>Choose your CSAT widget</p></figcaption></figure>

## Which CSAT widgets may I choose from?

<div><figure><img src="https://1058495162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHa8WIsJ5Z5NqmPmq5VS%2Fuploads%2FXAdPV2EgQtYvU5Lx4Ahp%2Fstandard%20widget.png?alt=media&#x26;token=340f1844-002f-4afb-8842-754495acafda" alt=""><figcaption><p>Standard</p></figcaption></figure> <figure><img src="https://1058495162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHa8WIsJ5Z5NqmPmq5VS%2Fuploads%2FE0ykTtTCwlAds2bwSGCb%2Fboxes%20widget.png?alt=media&#x26;token=c6560cf8-8522-41c4-b3c7-cff0d6cc2de7" alt=""><figcaption><p>Boxes</p></figcaption></figure> <figure><img src="https://1058495162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHa8WIsJ5Z5NqmPmq5VS%2Fuploads%2FYvTmSD0MD4499oryIi92%2Fsmileys%20widget.png?alt=media&#x26;token=a5589a45-b971-439a-bab2-0a889eda095c" alt=""><figcaption><p>Smileys</p></figcaption></figure> <figure><img src="https://1058495162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHa8WIsJ5Z5NqmPmq5VS%2Fuploads%2F775x6aN16OILWwWzIMA4%2Flink%20only%202%20widget.png?alt=media&#x26;token=242f7ee7-b331-40fe-9117-408abc3b516c" alt=""><figcaption><p>Link Only</p></figcaption></figure> <figure><img src="https://1058495162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHa8WIsJ5Z5NqmPmq5VS%2Fuploads%2F6ckBJK9OD8sLUvPch2en%2Femoji%20widget.png?alt=media&#x26;token=b1b5d8cf-9731-4a44-8fba-607850b88291" alt=""><figcaption><p>Emoji</p></figcaption></figure></div>

## Customizing the CSAT widget

It's usually easiest to start with an existing CSAT widget as a template, and then make your edits from there. If you like, you can edit the HTML by clicking the **<> button** to see the underlying source code of the widget.

{% hint style="warning" %}
Adding images or external URLs here may get stripped out by some email clients. We recommend using email-safe HTML only. &#x20;
{% endhint %}

<figure><img src="https://1058495162-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FCHa8WIsJ5Z5NqmPmq5VS%2Fuploads%2FSG3zpwddzp8F30xAUZbm%2Fsource%20code%20button%20in%20csat%20editor.png?alt=media&#x26;token=87dee6b9-b622-495f-af9c-bdc292566606" alt=""><figcaption><p>Click the Source Code button to see the underlying HTML</p></figcaption></figure>

## Special HTML attributes

If you are creating your own HTML widget, you'll need to include special `href` attributes in your links so Keeping can replace them to generate your rating links. For example, a link for a **great** rating would look like this:

```html
<a href="{{ ratings.great }}">Great</a>
```

Here are the attributes to use for the three ratings:

<pre class="language-html"><code class="lang-html"><strong>&#x3C;a href="{{ ratings.great }}"> your text here &#x3C;/a> 
</strong>&#x3C;a href="{{ ratings.okay }}"> your text here &#x3C;/a>
&#x3C;a href="{{ ratings.bad }}"> your text here &#x3C;/a>
</code></pre>

Or, simply include a link if you'd prefer your customers to rate you on the next step.

```html
<a href="{{ ratings.url }}"> How did I do? </a>
```

Keep in mind that you must surround your `href` value **with quotes**, like this:

```html
<p><br><a href="{{ ratings.great }}"><strong>Great</strong></a> </p>
```
