# Tips & Tricks

## Wrapped in an iframe

Each Custom Card is wrapped in a sandboxed iframe. This means each card is completely isolated from the Dixa interface and any other custom card.

> 💡 It's possible to execute JavaScript in the custom card, eg, fetching data, validating input, etc, as well as use CSS to style the card.


> ⚠️ It's also possible to create endless loops when writing JavaScript, thus making the interface unresponsive.


> ⚠️ When fetching data using JavaScript (with eg, [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)), please be aware of [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors)  on the receiving endpoint.


## Restricting access to the API endpoint

Dixa makes all requests to your "Hook URL" server-side. This means you can IP allowlist the IP addresses we use to access data on your endpoint as an additional security measure.

We currently pool through 3 IP addresses when making requests from the Dixa platform:

* 52.17.249.106/32
* 54.77.120.43/32
* 34.251.109.243/32


## Multiple custom cards

It is possible to add multiple Custom Cards.

Go to **Settings**, **Integrations**, select **Custom Cards,** and "**Add custom card**".

![Create a new card](/assets/create-new.0035ad2a17d904b39f686a61d7af1d4b56769b74fc37e2a578b315778250054c.fcd6b147.png)

## Sorting custom cards

By default, custom cards are sorted alphabetically. So if you have multiple custom cards that you want to display in a specific order, you can prefix the name of the custom card (Eg, 0_Order Status, 1_Booking Information)

Please note that sorting applies only to custom cards and the older generation of native integrations (Shopify 1.0, Magento, Salesforce). New-generation native integrations, such as Jira, GitHub, Linear, and Shopify (2.0), are also sorted alphabetically and will always be displayed above any custom cards.

Timeout
=======

Custom cards have a timeout of 10 seconds (10,000 ms), which, if encountered, will be presented with the following error:

> TCP idle-timeout encountered for Custom / Conversation Card


## Fullscreen

If you need full screen to get a good look at media sent in through forms, it's nice to use your monitor's full capacity.

We allow [requestFullscreen()](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen) from our Custom cards.