This tutorial will show how we can easily add an amCharts 5 chart to a Squarespace page.
Requirements
This tutorial assumes you have a basic understanding of how amCharts 5 works and how to create a code for it.
It also utilizes premium feature of Squarespace - JavaScript embedding - which means you will need a paid plan.
Adding
Let's add a new section and click ADD BLOCK
.
![](https://www.amcharts.com/docs/v5/wp-content/uploads/sites/7/2023/10/2023-10-02_10-27-50-1024x867.png)
Select an "Code" block.
![](https://www.amcharts.com/docs/v5/wp-content/uploads/sites/7/2023/10/2023-10-02_10-28-13-1024x867.png)
Squarespace will add a generic "Hello world" HTML block, which we will need to overwrite with amCharts code.
![](https://www.amcharts.com/docs/v5/wp-content/uploads/sites/7/2023/10/2023-10-02_10-28-28-1024x867.png)
Double-click on it to start editing.
It's an HTML, so we will add everything needed to display amCharts there:
- CSS
- amCharts JavaScript libraries
- amCharts JavaScript code
As a matter of test, let's just grab a ready-made code from this amCharts demo and paste it into Squarespace editor.
![](https://www.amcharts.com/docs/v5/wp-content/uploads/sites/7/2023/10/2023-10-02_10-40-03-1024x867.png)
Now, let's just size up the block and click SAVE
button to save the page.
![](https://www.amcharts.com/docs/v5/wp-content/uploads/sites/7/2023/10/2023-10-02_10-41-30-1024x867.png)
That's it! We can go and preview the page.
![](https://www.amcharts.com/docs/v5/wp-content/uploads/sites/7/2023/10/2023-10-02_10-43-00-1024x867.png)