# Advanced Custom Card Code

In Enate you can add custom content into your Tickets, Cases & Actions. This custom content is displayed via Custom Cards which can be set to display in the main section of the work item, and also as a section of the side panel on the right side of the screen. 

You can instantly create cards of your custom data fields or you can create Advanced Custom Cards that can be designed with HTML, JavaScript or CSS to show richer content such as external systems & webforms.

To create an Advanced Custom Card, select the 'Advanced' option in the Custom Card screen. This will allow you to add HTML, Typescript and CSS. 

<figure><img src="/files/3Yuj3Bs4jimZYa7w5Dnm" alt=""><figcaption></figcaption></figure>

You will first be presented with a warning message highlighting that you're responsible for the errors / unexpected behaviour that may occur from your bespoke code.

You can revert back at any time by switching the customized setting back to off - this will remove any custom code and return the card to its original form.

{% hint style="info" %}
Please Note: A Custom Card is an angular component which is a combination of Typescript, HTML and CSS. Please go to <https://angular.io/guide/component-overview> and read through it before moving on. Custom Cards in Enate execute in Angular. Customers who use or are developing advanced custom card content should review the changelog of Angular (<https://github.com/angular/angular/blob/master/CHANGELOG.md>) for changes that may affect their custom code.
{% endhint %}

Check out the following sections for explanations for how they are structured plus some examples of standard content you may wish to use..

{% content-ref url="/pages/-MWjcymdzcjwv8h0CCNN" %}
[Custom Card Validation](/enate-help/integrations/enate-integrations/custom-card-content/custom-card-code.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MWjd0ZJLzhxfB3KFTgw" %}
[Custom Card HTML](/enate-help/integrations/enate-integrations/custom-card-content/custom-card-html.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MWjd-iZFWiyisaw82WB" %}
[Custom Card CSS](/enate-help/integrations/enate-integrations/custom-card-content/custom-card-css.md)
{% endcontent-ref %}

You can check out our Github section that provides you with sample code integrations for Advanced Custom Cards here:

{% embed url="<https://github.com/EnateLtd/Custom-Card-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.enate.net/enate-help/integrations/enate-integrations/custom-card-content.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.