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.
