{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-docs/custom-cards/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":[]},"type":"markdown"},"seo":{"title":"Displaying Information","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":"displaying-information","__idx":0},"children":["Displaying Information"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The template can be written in HTML and supports ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://github.com/bkiers/Liqp"},"children":["Liqp"]}," (version 0.8.3.3), which is a Java implementation of ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://shopify.github.io/liquid/"},"children":["Liquid"]},". Additionally, it's possible to mix Liquid and HTML in the ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Template content"]}," to display the information from the data source."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"html","__idx":1},"children":["HTML"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Here's an example template:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"html","header":{"controls":{"copy":{}}},"source":"\n \n \n \n \n \n \n
\n \n
\n \n
\n
\n
ELEMENT TYPE
\n
ELEMENT VALUE
\n
\n
\n
ELEMENT TYPE
\n
ELEMENT VALUE
\n
\n
\n
ELEMENT TYPE
\n
ELEMENT VALUE
\n
\n
\n \n\n","lang":"html"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you decide to use the template, replace \"IMAGEHERE\" with a link to your logo and place data where you see the block of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["
"]}," (table row). This is what it would look like in this phase:",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/example.f0fd601d29b1d524b41587807aa43bccc60a6788e7debfb0c219a90afe0fe59f.fcd6b147.png","alt":"Rendered version of the HTML"},"children":[]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"liquid","__idx":2},"children":["Liquid"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You can use ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"http://liquidmarkup.org/"},"children":["Liquid markup"]}," to display data. For example, if your webhook URL responds with the following JSON:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"json","header":{"controls":{"copy":{}}},"source":"{\n \"results\":{ \n \"name\":\"Dixa\",\n \"vertical\":\"SaaS\",\n \"revenue\":3000.22\n }\n}\n","lang":"json"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You could use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{{ results.name }}"]}," to display \"Dixa\" in your custom card. Likewise, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{{ results.revenue }}"]}," would display 3000.22."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If you'd only want to show the revenue if it's under 9000, you could do ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{% if results.revenue < 9000 %} {{ results.revenue }} {% endif %}"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["After adding data, the end result should be something like this:"," ",{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/example-filled.14f98f19ff442ad038e2b9d7e3496804940bf525052705843c5f71fdfa9720f5.fcd6b147.png","alt":"Rendered version of the filled HTML"},"children":[]}]}]},"headings":[{"value":"Displaying Information","id":"displaying-information","depth":1},{"value":"HTML","id":"html","depth":2},{"value":"Liquid","id":"liquid","depth":2}],"frontmatter":{"seo":{"title":"Displaying Information"}},"lastModified":"2026-04-09T11:32:42.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/custom-cards/displaying-information","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}