How to embed Flourish visualizations in your Cards

Did you know that you can embed Flourish visualizations in your Cards? Read how to do this below!

1
Start a new Cards visualization by using one of our starting points.
2
In the Data tab, create a new column and call it Chart-ID. Then, bind it to the Info for popups section.
3
Go back to the visualization you want to embed and publish it. Then, open the auto-generated public.flourish.studio link and copy the chart's ID —you can find it in the visualization's URL.

4
Copy and paste the chart's ID in the column you have created earlier in your Cards visualization. You can do this with multiple visualizations —but each ID needs to be placed in a separate row.


5
In the Cards' Preview tab, open the Cards setting, scroll to the bottom and enable the Customize card HTML toggle.

6
In the Custom HTML text box, paste the following code:
7
Then, you should be able to see your charts embedded in a similar way:
8
You can now continue with the customizations of your cards. Please note that in order for your other columns to work (containing text and images), their names need to match the column names in your code.

For instance, if your Title column is named differently, you need to rename it so it matches the exact name in the code, in this case, {{Title}}.

Additionally, when you customize the cards' HTML, you should structure your custom code in the order you want your elements displayed —in this case, the titles will go below the embedded charts.