<gwi-chart> tag, like the example below. Check the numbers, title and subtitle, and ask Claude to change the data or wording until they are right. The look follows the design system. Ask for content changes, or for a styling override (see Inline styling below).<gwi-chart type="bar" unit="%" highlight="Short-form video"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Short-form video",
"Social networks",
"Messaging",
"Streaming",
"Podcasts",
"Gaming"
],
"series": [
{
"name": "Weekly use",
"values": [
82,
74,
69,
58,
41,
37
]
}
]
}
</script>
</gwi-chart>Data from several markets or sectors (for example UK and US, or Financial and Tech)? Say so and Claude adds a drop-down filter to the chart. See "Market filter" below.
Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="stat"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"value": "82%",
"label": "of online adults use short-form video every week",
"tiles": [
{
"label": "Daily short-form video use",
"value": "47%",
"delta": "+5 pts vs 2025",
"trend": [
33,
35,
36,
37,
38,
40,
41,
42,
43,
45,
46,
47
]
},
{
"label": "Brand discovery on social",
"value": "54%",
"delta": "+3 pts vs 2025",
"trend": [
42,
44,
43,
46,
47,
48,
49,
50,
51,
52,
53,
54
]
},
{
"label": "Daily time on streaming",
"value": "2.4h",
"delta": "+0.2h vs 2025",
"trend": [
1.9,
2.0,
2.0,
2.1,
2.1,
2.2,
2.2,
2.3,
2.3,
2.3,
2.4,
2.4
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="bar" unit="%" highlight="Short-form video"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Short-form video",
"Social networks",
"Messaging",
"Streaming",
"Podcasts",
"Gaming"
],
"series": [
{
"name": "Weekly use",
"values": [
82,
74,
69,
58,
41,
37
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="bar" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Prefer to shop online",
"Research before I buy",
"Follow brands on social media",
"Switch brands for a better deal",
"Trust brands that share my values"
],
"series": [
{
"name": "Millennials",
"values": [
77,
69,
68,
66,
64
]
}
]
}
</script>
</gwi-chart>labels="above" puts each statement (up to three lines) above its bar, and the bar runs the full width of the chart. Add ranked if you want numbered badges.
<gwi-chart
type="bar"
labels="above"
unit="%"
title="Most leaders see AI pushing organisations towards the same answers"
subtitle="This is a placeholder subtitle, please change accordingly"
source="Illustrative data, not real GWI figures"
base="Online adults 16 to 64">
<script type="application/json">
{
"categories": [
"Often produces similar recommendations for different organizations",
"Insights reflect consensus, not competitive advantage",
"Organisations base decisions on increasingly similar information",
"Harder to develop insights competitors can’t easily access"
],
"series": [
{
"name": "Share who agree",
"values": [
77,
76,
75,
69
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="bar" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Trust brands that share my values",
"Research before I buy",
"Prefer to shop online"
],
"series": [
{
"name": "Gen Z",
"values": [
72,
58,
81
]
},
{
"name": "Millennials",
"values": [
64,
69,
77
]
},
{
"name": "Gen X",
"values": [
51,
74,
63
]
},
{
"name": "Boomers",
"values": [
43,
66,
46
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="column" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Trust brands that share my values",
"Research before I buy",
"Prefer to shop online",
"Follow brands on social media",
"Switch brands for a better deal"
],
"series": [
{
"name": "Gen Z",
"values": [
72,
58,
81,
76,
62
]
},
{
"name": "Millennials",
"values": [
64,
69,
77,
68,
66
]
},
{
"name": "Gen X",
"values": [
51,
74,
63,
44,
71
]
},
{
"name": "Boomers",
"values": [
43,
66,
46,
29,
58
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="column" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Gen Z",
"Millennials",
"Gen X",
"Baby boomers",
"Silent generation"
],
"series": [
{
"name": "Daily social media use",
"values": [
72,
64,
51,
38,
22
]
}
]
}
</script>
</gwi-chart>Add columns="wide" to a one series column chart and each column is as wide as its cell, minus a 30px gap.
<gwi-chart type="column" columns="wide" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Gen Z",
"Millennials",
"Gen X",
"Baby boomers",
"Silent generation"
],
"series": [
{
"name": "Daily social media use",
"values": [
72,
64,
51,
38,
22
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="line" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
"2025",
"2026"
],
"series": [
{
"name": "Short-form video",
"values": [
26,
38,
35,
52,
49,
66,
63,
82
]
},
{
"name": "Long-form video",
"values": [
62,
67,
58,
64,
55,
60,
53,
56
]
},
{
"name": "Live TV",
"values": [
70,
62,
67,
52,
56,
41,
44,
32
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="area" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
"2025",
"2026"
],
"series": [
{
"name": "Short-form video",
"values": [
28,
43,
37,
58,
51,
72,
66,
82
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="stacked-area" unit="h"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"2019",
"2020",
"2021",
"2022",
"2023",
"2024",
"2025",
"2026"
],
"series": [
{
"name": "Mobile",
"values": [
2.0,
2.9,
2.5,
3.7,
3.4,
4.7,
4.4,
5.6
]
},
{
"name": "Desktop",
"values": [
3.6,
3.1,
3.9,
2.9,
3.6,
2.6,
3.1,
2.3
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="stacked-bar" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"16 to 24",
"25 to 34",
"35 to 44",
"45 to 54"
],
"series": [
{
"name": "Social media",
"values": [
38,
33,
26,
20
]
},
{
"name": "Search",
"values": [
17,
26,
32,
38
]
},
{
"name": "Streaming",
"values": [
27,
23,
21,
18
]
},
{
"name": "Other",
"values": [
18,
18,
21,
24
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="stacked-column" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Gen Z",
"Millennials",
"Gen X",
"Baby boomers"
],
"series": [
{
"name": "Social media",
"values": [
38,
33,
26,
20
]
},
{
"name": "Search",
"values": [
17,
26,
32,
38
]
},
{
"name": "Streaming",
"values": [
27,
23,
21,
18
]
},
{
"name": "Other",
"values": [
18,
18,
21,
24
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="heatmap" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"16 to 24",
"25 to 34",
"35 to 44",
"45 to 54",
"55 to 64"
],
"series": [
{
"name": "Video",
"values": [
92,
84,
71,
58,
41
]
},
{
"name": "Social",
"values": [
85,
78,
66,
52,
38
]
},
{
"name": "Messaging",
"values": [
88,
86,
79,
68,
57
]
},
{
"name": "Streaming",
"values": [
71,
69,
62,
50,
39
]
},
{
"name": "Podcasts",
"values": [
34,
48,
45,
37,
22
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="treemap" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"items": [
{
"name": "Short-form video",
"value": 34
},
{
"name": "Social networks",
"value": 22
},
{
"name": "Streaming",
"value": 18
},
{
"name": "Messaging",
"value": 14
},
{
"name": "Gaming",
"value": 12
}
],
"seriesName": "Share of time"
}
</script>
</gwi-chart>Add layout="square" and the tiles are laid out in the order you give them, in a square, then stretched to the chart. Without it, tiles are sorted by size.
<gwi-chart type="treemap" layout="square" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"items": [
{
"name": "Short-form video",
"value": 34
},
{
"name": "Social networks",
"value": 22
},
{
"name": "Streaming",
"value": 18
},
{
"name": "Messaging",
"value": 14
},
{
"name": "Gaming",
"value": 12
}
],
"seriesName": "Share of time"
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="sankey" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"stages": [
"Discover",
"Research",
"Buy"
],
"links": [
{
"source": "Social media",
"target": "Video platforms",
"value": 18
},
{
"source": "Social media",
"target": "Brand websites",
"value": 9
},
{
"source": "Social media",
"target": "Review sites",
"value": 5
},
{
"source": "Search engines",
"target": "Review sites",
"value": 14
},
{
"source": "Search engines",
"target": "Brand websites",
"value": 10
},
{
"source": "Search engines",
"target": "Video platforms",
"value": 4
},
{
"source": "Friends and family",
"target": "Review sites",
"value": 7
},
{
"source": "Friends and family",
"target": "Brand websites",
"value": 8
},
{
"source": "TV and streaming",
"target": "Video platforms",
"value": 6
},
{
"source": "TV and streaming",
"target": "Brand websites",
"value": 9
},
{
"source": "Video platforms",
"target": "Online marketplace",
"value": 15
},
{
"source": "Video platforms",
"target": "In store",
"value": 13
},
{
"source": "Review sites",
"target": "Online marketplace",
"value": 14
},
{
"source": "Review sites",
"target": "In store",
"value": 12
},
{
"source": "Brand websites",
"target": "Brand website purchase",
"value": 20
},
{
"source": "Brand websites",
"target": "In store",
"value": 9
},
{
"source": "Brand websites",
"target": "Online marketplace",
"value": 7
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="bar" unit="%" flags
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"filterLabel": "Market",
"views": [
{
"name": "United Kingdom",
"categories": [
"Prefer to shop online",
"Research before I buy",
"Follow brands on social media",
"Switch brands for a better deal",
"Trust brands that share my values"
],
"series": [
{
"name": "Millennials",
"values": [
77,
70,
70,
69,
68
]
}
]
},
{
"name": "United States",
"categories": [
"Prefer to shop online",
"Research before I buy",
"Follow brands on social media",
"Switch brands for a better deal",
"Trust brands that share my values"
],
"series": [
{
"name": "Millennials",
"values": [
65,
60,
60,
59,
58
]
}
]
},
{
"name": "Germany",
"categories": [
"Prefer to shop online",
"Research before I buy",
"Follow brands on social media",
"Switch brands for a better deal",
"Trust brands that share my values"
],
"series": [
{
"name": "Millennials",
"values": [
54,
49,
50,
49,
49
]
}
]
}
]
}
</script>
</gwi-chart>Add flags and a name that is a country (UK, USA, Singapore, Germany ...) gets its design system flag. Names without a flag, such as Global, stay text only. Webflow: paste only the <gwi-chart> tag, never a script that loads the component.
<gwi-chart type="bar"
unit="%"
flags
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Prefer to shop online",
"Research before I buy",
"Follow brands on social media",
"Switch brands for a better deal"
],
"series": [
{
"name": "UK",
"values": [
77,
70,
70,
69
]
},
{
"name": "USA",
"values": [
65,
60,
60,
59
]
},
{
"name": "Germany",
"values": [
54,
49,
50,
49
]
},
{
"name": "Singapore",
"values": [
72,
66,
63,
61
]
}
]
}
</script>
</gwi-chart>Add flags and a name that is a country (UK, USA, Singapore, Germany ...) gets its design system flag. Names without a flag, such as Global, stay text only. Webflow: paste only the <gwi-chart> tag, never a script that loads the component.
<gwi-chart type="heatmap"
unit="%"
flags
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Short-form video",
"Social networks",
"Messaging",
"Streaming",
"Podcasts"
],
"series": [
{
"name": "Global",
"values": [
82,
74,
69,
61,
28
]
},
{
"name": "UK",
"values": [
79,
71,
66,
64,
25
]
},
{
"name": "USA",
"values": [
84,
76,
70,
68,
34
]
},
{
"name": "Germany",
"values": [
70,
62,
72,
55,
22
]
},
{
"name": "Singapore",
"values": [
88,
81,
79,
66,
31
]
}
]
}
</script>
</gwi-chart>Add flags and a name that is a country (UK, USA, Singapore, Germany ...) gets its design system flag. Names without a flag, such as Global, stay text only. Webflow: paste only the <gwi-chart> tag, never a script that loads the component.
<gwi-chart type="stacked-bar"
unit="%"
flags
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Global",
"UK",
"USA",
"Germany",
"Singapore"
],
"series": [
{
"name": "Social media",
"values": [
34,
31,
38,
26,
41
]
},
{
"name": "Search",
"values": [
27,
30,
24,
35,
22
]
},
{
"name": "Streaming",
"values": [
22,
23,
21,
20,
23
]
},
{
"name": "Other",
"values": [
17,
16,
17,
19,
14
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="scatter" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"xLabel": "Reach",
"yLabel": "Impact",
"points": [
{
"name": "Broadcast TV",
"x": 92,
"y": 33
},
{
"name": "Social media",
"x": 92,
"y": 28
},
{
"name": "Online TV",
"x": 77,
"y": 19
},
{
"name": "Music streaming",
"x": 71,
"y": 16
},
{
"name": "Online press",
"x": 75,
"y": 14
},
{
"name": "Radio",
"x": 74,
"y": 13
},
{
"name": "Physical press",
"x": 71,
"y": 12
},
{
"name": "Podcasts",
"x": 61,
"y": 11
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="dot-plot" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Social media",
"Streaming",
"Online press",
"Podcasts",
"Radio",
"Broadcast TV",
"Gaming",
"Music streaming",
"Online video",
"Messaging"
],
"series": [
{
"name": "2024",
"values": [
62,
58,
41,
28,
52,
60,
35,
49,
66,
71
]
},
{
"name": "2026",
"values": [
71,
66,
35,
36,
44,
51,
42,
55,
74,
76
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="slope" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"categories": [
"Social media",
"Streaming",
"Podcasts",
"Online press",
"Radio",
"Broadcast TV",
"Gaming",
"Music streaming",
"Online video",
"Messaging",
"Search",
"Email"
],
"series": [
{
"name": "2024",
"values": [
78,
64,
28,
41,
52,
60,
35,
49,
66,
71,
83,
57
]
},
{
"name": "2026",
"values": [
81,
72,
36,
35,
44,
51,
42,
55,
74,
76,
80,
49
]
}
]
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart type="half-donut" unit="%"
title="This is the title, please change accordingly"
subtitle="This is a placeholder subtitle, please change accordingly"
source="GWI Core, Q2 2026"
base="Online adults 16 to 64"
source-url="https://example.com/core"
question="Q4. Which of the following do you use weekly?"
question-url="https://example.com/q4">
<script type="application/json">
{
"items": [
{
"name": "Short-form video",
"value": 38
},
{
"name": "Social networks",
"value": 27
},
{
"name": "Streaming",
"value": 21
},
{
"name": "Podcasts",
"value": 9
},
{
"name": "Other",
"value": 5
}
],
"seriesName": "Share of time"
}
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that. Inline insights have no title, subtitle or buttons, so source, base and questions are not shown. To change colours, add color="lime.50" or background="neutral.20" (any design system token) to the tag.
<gwi-chart type="inline-donut" unit="%">
<script type="application/json">
{ "value": 77,
"label": "of senior decision-makers agree AI often produces similar recommendations for different organizations." }
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that. Inline insights have no title, subtitle or buttons, so source, base and questions are not shown. To change colours, add color="lime.50" or background="neutral.20" (any design system token) to the tag.
<gwi-chart type="inline-dots" unit="%">
<script type="application/json">
{ "value": 84,
"label": "of leaders are confident AI can accurately explain why people behave the way they do." }
</script>
</gwi-chart>Webflow: paste only the <gwi-chart> tag below into a Code Embed. Keep the data script inside it, but do not add a script that loads the component. The site already does that.
<gwi-chart
type="stats"
unit="%"
title="Most leaders see AI pushing organisations towards the same answers"
subtitle="This is a placeholder subtitle, please change accordingly"
source="Illustrative data, not real GWI figures"
base="Online adults 16 to 64">
<script type="application/json">
{
"stats": [
{
"value": 77,
"label": "often produces similar recommendations for different organizations"
},
{
"value": 76,
"label": "insights often reflect consensus opinion rather than competitive advantage"
},
{
"value": 75,
"label": "is causing organizations to base decisions on increasingly similar information"
},
{
"value": 69,
"label": "is making it harder to develop insights that competitors cannot easily access"
}
]
}
</script>
</gwi-chart>One tall bar that stretches from one stat to the next and loops. Keep the data script inside the tag.
<gwi-chart
type="stat-bar"
unit="%"
title="Short-form video is part of daily life"
subtitle="This is a placeholder subtitle, please change accordingly"
source="Illustrative data, not real GWI figures"
base="Online adults 16 to 64">
<script type="application/json">
{
"interval": 3,
"stats": [
{
"value": 80,
"label": "watch short-form video every week"
},
{
"value": 56,
"label": "watch it every day"
},
{
"value": 34,
"label": "say it takes up most of their media time",
"mark": "*"
}
],
"notes": [
"* Illustrative note, please change accordingly"
]
}
</script>
</gwi-chart>ranked adds the numbered badges. reference draws the dotted line, use it with max.
<gwi-chart
type="bar"
ranked=""
unit="%"
max="100"
reference="{"value":50,"label":"Majority"}"
title="Who answers when AI gets it wrong?"
subtitle="This is a placeholder subtitle, please change accordingly"
source="Illustrative data, not real GWI figures"
base="Online adults 16 to 64">
<script type="application/json">
{
"categories": [
"Shared responsibility",
"The organisation",
"The AI provider",
"The employee using the output"
],
"series": [
{
"name": "Share",
"values": [
35,
24,
21,
19
]
}
]
}
</script>
</gwi-chart>Each group gets its own colour and a rule between groups. Clicking a group in the key switches it off.
<gwi-chart
type="bar"
unit="%"
title="Attitudes differ by experience"
subtitle="This is a placeholder subtitle, please change accordingly"
source="Illustrative data, not real GWI figures"
base="Online adults 16 to 64">
<script type="application/json">
{
"groups": [
{
"name": "Heavy users",
"items": [
{
"name": "Trust AI insights",
"value": 62
},
{
"name": "Check the sources",
"value": 48
}
]
},
{
"name": "Light users",
"items": [
{
"name": "Trust AI insights",
"value": 38
},
{
"name": "Check the sources",
"value": 41
}
]
}
]
}
</script>
</gwi-chart>The grouped bar chart with labels="above": each statement sits above its bar and the bars run the full width.
<gwi-chart
type="bar" labels="above"
unit="%"
title="Attitudes differ by experience"
subtitle="This is a placeholder subtitle, please change accordingly"
source="Illustrative data, not real GWI figures"
base="Online adults 16 to 64">
<script type="application/json">
{
"groups": [
{
"name": "Heavy users",
"items": [
{
"name": "Trust AI insights",
"value": 62
},
{
"name": "Check the sources",
"value": 48
}
]
},
{
"name": "Light users",
"items": [
{
"name": "Trust AI insights",
"value": 38
},
{
"name": "Check the sources",
"value": 41
}
]
}
]
}
</script>
</gwi-chart>Wrap the charts in <gwi-chart-carousel>. It swaps them every interval seconds and loops. The two arrows next to Download image step through the charts and stop the loop. With download-all the Download image button saves every chart in turn. Give every chart the same height so they line up.
<gwi-chart-carousel interval="8" download-all>
<gwi-chart
type="bar"
ranked=""
height="360"
max="38"
unit="%"
filename="bad-decisions-bar"
title="Bad decisions from an AI insight"
subtitle="Most common impacts"
source="Illustrative data, not real GWI figures"
base="Online adults 16 to 64">
<script type="application/json">
{
"categories": [
"Internal rework",
"Delayed decisions",
"Customer complaints",
"Financial loss",
"Reputational damage"
],
"series": [
{
"name": "Share",
"values": [
38,
36,
34,
27,
26
]
}
]
}
</script>
</gwi-chart>
<gwi-chart
type="treemap"
height="360"
unit="%"
filename="bad-decisions-sector"
title="Bad decisions from an AI insight"
subtitle="By sector"
source="Illustrative data, not real GWI figures"
base="Online adults 16 to 64">
<script type="application/json">
{
"items": [
{
"name": "Gaming",
"value": 86
},
{
"name": "Sports",
"value": 67
},
{
"name": "Agency",
"value": 58
},
{
"name": "CPG/Retail",
"value": 57
},
{
"name": "Media/Tech",
"value": 49
},
{
"name": "Travel",
"value": 45
}
],
"seriesName": "Share"
}
</script>
</gwi-chart>
</gwi-chart-carousel>Add selector to <gwi-chart-carousel> and each chart's subtitle becomes a dropdown of all the subtitles, for example “Most common impacts” and “By sector”. Picking one shows that chart and stops the loop. Download image still saves every chart, with the plain subtitle. Give every chart the same height so they line up.
<gwi-chart-carousel interval="8" download-all selector>
<gwi-chart
type="bar"
ranked=""
height="360"
max="38"
unit="%"
filename="bad-decisions-bar"
title="Bad decisions from an AI insight"
subtitle="Most common impacts"
source="Illustrative data, not real GWI figures"
base="Online adults 16 to 64">
<script type="application/json">
{
"categories": [
"Internal rework",
"Delayed decisions",
"Customer complaints",
"Financial loss",
"Reputational damage"
],
"series": [
{
"name": "Share",
"values": [
38,
36,
34,
27,
26
]
}
]
}
</script>
</gwi-chart>
<gwi-chart
type="treemap"
height="360"
unit="%"
filename="bad-decisions-sector"
title="Bad decisions from an AI insight"
subtitle="By sector"
source="Illustrative data, not real GWI figures"
base="Online adults 16 to 64">
<script type="application/json">
{
"items": [
{
"name": "Gaming",
"value": 86
},
{
"name": "Sports",
"value": 67
},
{
"name": "Agency",
"value": 58
},
{
"name": "CPG/Retail",
"value": 57
},
{
"name": "Media/Tech",
"value": 49
},
{
"name": "Travel",
"value": 45
}
],
"seriesName": "Share"
}
</script>
</gwi-chart>
</gwi-chart-carousel>Set any of these in the style attribute of the <gwi-chart> tag. Nothing changes if you set none. The Download image picture keeps the styling. Full list and defaults are in README.md.
--gwi-pink, --gwi-lime, --gwi-deep, --gwi-dlime, --gwi-grey Data colours--gwi-ramp-1 to --gwi-ramp-9 Pink ramp for treemap, donut and heatmap--gwi-ink, --gwi-ink-strong, --gwi-muted, --gwi-soft Text colours--gwi-grid, --gwi-track, --gwi-axis Rules, bar tracks, axis lines--gwi-radius, --gwi-bar-height Corner radius, bar thickness--gwi-font, --gwi-number-font Fonts--gwi-title-size, --gwi-title-weight, --gwi-sub-size Title and subtitle--gwi-stat-size, --gwi-stat-label-size, --gwi-stats-cols, --gwi-stats-gap, --gwi-stat-bar-height Big numbers--gwi-head-gap, --gwi-foot-gap, --gwi-max-width Spacing and width--gwi-btn-radius, --gwi-btn-height Buttons<gwi-chart
type="bar"
ranked=""
unit="%"
title="Styled inline with CSS variables"
subtitle="Blue, square corners, thicker bars"
source="Illustrative data, not real GWI figures"
base="Online adults 16 to 64"
style="--gwi-pink:#0055FF; --gwi-radius:0px; --gwi-bar-height:28px; --gwi-title-size:40px">
<script type="application/json">
{
"categories": [
"Short-form video",
"Social networks",
"Streaming",
"Messaging"
],
"series": [
{
"name": "Share",
"values": [
34,
22,
18,
14
]
}
]
}
</script>
</gwi-chart>