# Custom Summary Tags

![](/files/-Lk9y_f-BOw0UR1XhEzi)

A common request when building integrations is to customize the summary tags for an integration.  The following recipe will walk through setting color coded indicators in the summary tags of an integration.   In this example, the color coding will be tied to the severity level of the indicator.

To support customizing the summary tags, we will need to modify the integration's config to add in summary block configuration properties.  Add the following properties to your `config.js` file located at `/app/polarity-server/integrations/<your-integration-directory>/config/config.js`

{% code title="config/config.js" %}

```javascript
{
  summary: {
    component: {
      file: "./components/summary.js"
    },
    template: {
      file: "./templates/summary.hbs"
    }
  }
}
```

{% endcode %}

The configuration file references two new files we will need to add.  The first file is a custom handlebars template file for our summary block (the area in the integration where we display the "summary tags").  Create a new `summary.hbs` file inside the `templates` directory and add the following code.

{% code title="templates/summary.hbs" %}

```markup
{{#each block.data.summary as |tag|}}
    <span {{on "click" (optional this.scrollToIntegration)}} class="integration-summary-tag integration-background-color integration-border-color">
       <span class="acronym integration-text-bold-color">{{block.acronym}}</span>
       <span class="integration-text-color">
           {{fa-icon icon="circle"
                     class=(concat iconClass "")
                     fixedWidth=true}}
           {{tag}}
       </span>
    </span>
{{/each}}
```

{% endcode %}

The above code loops through the tags specified in the summary array and then creates the HTML layout required to render a tag.  Notice that we're adding a custom `circle` icon via the `{{fa-icon}}` helper.  When we create this icon we're setting a dynamic class which we will set in our `summary.js` component file.  In addition, notice the `{{on "click"}}` helper which is added to the outer `span` tag.  This helper is used to implement the "jump to integration" behavior and should be included in your custom summary tag template.

Copy the following component file to your `summary.js` file.

{% code title="components/summary.js" %}

```javascript
polarity.export = PolarityComponent.extend({
  iconClass: Ember.computed('block.data.details.severity', function() {
    let severity = this.get('block.data.details.severity');
    let color = 'red';
    if (severity === 'low') {
      color = 'green';
    }

    return Ember.String.htmlSafe(color);
  })
});
```

{% endcode %}

The component above assumes you have a `severity` property in your returned integration data.  We're creating a computed property called `iconClass` which will return a CSS class name used to color our icon.  The color is being set based on the value of the `severity` property, green for low severity and red for high severity. The `iconClass` property is applied to the icon we created in our handlebars template file `summary.hbs`.

Finally, we will need to define the styles in our custom Less stylesheet.  If you haven't already you will need to add a styles configuration property to your `config.js` file.

{% code title="config/config.js" %}

```javascript
{
  styles: ["./styles/styles.less"]
}
```

{% endcode %}

Once added to your config, create the `styles.less` file and add the classes for your custom colors.

{% code title="styles/style.less" %}

```css
.green {
  color: #7BC942 !important;
}

.red {
  color: #FF4559 !important;
}

```

{% endcode %}

Notice that the name of the class matches the value we return from our summary component for the `iconClass` computed property.

Once everything is setup, you should see colored circle icons that represent the severity of an indicator right in the summary block of your integration.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.polarity.io/integrations/recipes/colored-icons.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.