> ## Content Index > Fetch the complete content index at: https://blog.addpipe.com/llms.txt > Use this file to discover other available public pages before exploring further. # Adding Audio & Video Recording to Your Squarespace Website - URL: https://blog.addpipe.com/adding-video-recording-to-your-squarespace-website/ - Published: 2019-08-13T12:06:33.000Z - Updated: 2026-05-21T08:18:07.000Z - Author: Octavian - Tags: Tutorials, Squarespace, #Import 2026-05-22 13:18 In this quick tutorial, I am going to show you how to add video or audio recording to your [Squarespace](https://www.squarespace.com/) built website. More specifically we're going to add a video recorder to the contact page of a Squarespace website template so that visitors can leave us a video message, but you can use the [Pipe video recorder](https://addpipe.com/video-recorder) with your [Squarespace](https://www.squarespace.com/) website for any use case. Luckily, Squarespace allows adding both custom HTML & custom JavaScript code in their pages albeit only with Business, Commerce and trial accounts. ![The Business, Commerce & trial accounts from Squarespace can use the Pipe JS & HTML embed code.](https://blog.addpipe.com/content/images/2019/08/Squarespace-pricing-plans-allowing-JS-embeds.png) The Business, Commerce & trial accounts from Squarespace can use the Pipe JS & HTML embed code. Here's what you need to do to build that video contact form: 1. [Create a (free) Pipe account](https://addpipe.com/signup?trial) if you have not already (takes 30 seconds) 2. Once signed in to Pipe, go to the [Embed section](https://addpipe.com/embed) and copy the first 3 lines of the 2.0 HTML embed code: ![The recorder embed page in the Pipe account area](https://blog.addpipe.com/content/images/2019/08/Pipe-HTML-2.0-embed-code-for-Squarespace.png) The recorder embed page in the Pipe account area **Note:** the page above is the place where you can make some changes to your recorder: - desired video resolution & recorder size - whether to record video + audio or just audio - whether to allow uploads of existing files - whether to allow the user to send a screen recording Once you're happy with your changes click the green *\[Generate Embed Code\]* and the embed code to the right - plus the live preview at the top - will be updated. 3\. In Squarespace go to the `Home Menu` \> `Settings` \> `Advanced` \> `Code Injection` section and paste those 3 lines into the HEADER box: ![The Code Injection section in Squarespace](https://blog.addpipe.com/content/images/2019/08/Adding-custom-JS-code-to-Squarespace-website-header.png) **Note:** the 1st of the 3 lines is a comment so you are free to remove it alltogether. 4\. Don't forget to click SAVE at the top. Our `pipe.js` and `pipe.css` files will now be loaded with *every* page of your website. **Note:** If you want to include these 2 files on just the page with the recorder - to avoid them being loaded by every page - you can do that from that page's Settings modal: click on **Advanced**, paste the code in the **PAGE HEADER CODE INJECTION** box and click **Save** in the top left: ![Page Header Code Injection in Squarespace](https://blog.addpipe.com/content/images/2019/08/Adding-custom-JS-and-CSS-files-to-just-one-page-of-a-Squarespace-website.png) 5\. Now go to the page where you want the recorder embedded, enter EDIT mode and insert a Code block where you want the recorder to show up. ![Search for a code block](https://blog.addpipe.com/content/images/2019/08/Adding-a-custom-HTML-and-JS-code-block-to-your-Squarespace-page.png) 6\. In that code block paste the last 2 lines of code from the 2.0 HTML embed code available in your [Pipe account area](https://addpipe.com/embed). Once the code is there, click **APPLY** and **SAVE**. Make sure Display Source is turned OFF. Here's how your code block should look: ![The structure of the code block](https://blog.addpipe.com/content/images/2019/08/Adding-the-Pipe-recorder-to-a-Squarespace-website-page.png) You're done! If you preview the page the recorder should how up. Here's my new contact page after adding two more H2 titles: ![The Pipe recorder embedded in a Squarespace theme contact page](https://blog.addpipe.com/content/images/2019/08/Pipe-video-recorder-on-the-contact-page-of-a-Squarespace-website.png) The Pipe recorder embedded in a Squarespace theme contact page The [inline recorder for Chrome on Android](https://blog.addpipe.com/inline-html5-desktop-recorder-on-chrome-android/) looks good too after setting the width to 100%: ![A Squarespace template contact page with the inline Pipe recorder for Chrome on Android embedded](https://blog.addpipe.com/content/images/2019/08/Pipe-inline-desktop-recorder-running-in-Chrome-on-Android-1.jpg) A Squarespace template contact page with the inline Pipe recorder for Chrome on Android embedded Visitors of the above page will now be able to record a video. All recorded videos will show up in the Pipe account area under [Recordings](https://addpipe.com/recordings). ![The recordings list in the Pipe account area](https://blog.addpipe.com/content/images/2019/08/The-PIpe-account-area-recordings-list-1.png) The recordings list in the Pipe account area If you encounter any issues or have any questions we highly recommend you check out these 3 resources: - Squarespace documentation: [Site-wide Code Injection](https://support.squarespace.com/hc/en-us/articles/205815908) - Squarespace documentation: [Per-page Code Injection](https://support.squarespace.com/hc/en-us/articles/205815908#toc-per-page-code-injection) - Squarespace documentation: [Using Code Blocks](https://support.squarespace.com/hc/en-us/articles/206543167) or [contact us](https://addpipe.com/contact/) directly.