{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/custom-cards/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Tips & Tricks","description":"Start building with the Dixa API","siteUrl":"https://docs.dixa.io/","keywords":"dixa developer hub, api portal starter, api reference docs","lang":"en-US","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"tips--tricks","__idx":0},"children":["Tips & Tricks"]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"wrapped-in-an-iframe","__idx":1},"children":["Wrapped in an iframe"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["💡 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."]}]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["⚠️ It's also possible to create endless loops when writing JavaScript, thus making the interface unresponsive."]}]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["⚠️ When fetching data using JavaScript (with eg, ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API"},"children":["Fetch API"]},"), please be aware of ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors"},"children":["CORS"]},"  on the receiving endpoint."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"restricting-access-to-the-api-endpoint","__idx":2},"children":["Restricting access to the API endpoint"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We currently pool through 3 IP addresses when making requests from the Dixa platform:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["52.17.249.106/32"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["54.77.120.43/32"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["34.251.109.243/32"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"multiple-custom-cards","__idx":3},"children":["Multiple custom cards"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["It is possible to add multiple Custom Cards."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Go to ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Settings"]},", ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Integrations"]},", select ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Custom Cards,"]}," and \"",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Add custom card"]},"\"."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/create-new.0035ad2a17d904b39f686a61d7af1d4b56769b74fc37e2a578b315778250054c.fcd6b147.png","alt":"Create a new card"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"sorting-custom-cards","__idx":4},"children":["Sorting custom cards"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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)"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Timeout"," ","======="]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Custom cards have a timeout of 10 seconds (10,000 ms), which, if encountered, will be presented with the following error:"]},{"$$mdtype":"Tag","name":"blockquote","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["TCP idle-timeout encountered for Custom / Conversation Card"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"fullscreen","__idx":5},"children":["Fullscreen"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["We allow ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen"},"children":["requestFullscreen()"]}," from our Custom cards."]}]},"headings":[{"value":"Tips & Tricks","id":"tips--tricks","depth":1},{"value":"Wrapped in an iframe","id":"wrapped-in-an-iframe","depth":2},{"value":"Restricting access to the API endpoint","id":"restricting-access-to-the-api-endpoint","depth":2},{"value":"Multiple custom cards","id":"multiple-custom-cards","depth":2},{"value":"Sorting custom cards","id":"sorting-custom-cards","depth":2},{"value":"Fullscreen","id":"fullscreen","depth":2}],"frontmatter":{"seo":{"title":"Tips & Tricks"}},"lastModified":"2026-04-09T11:32:42.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/custom-cards/tips-and-tricks","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}