Step by step
- Open the page in the editor and click Edit.
- Click Add block (or a + point) where you want the widget, then choose Code.
- Click the pencil on the block, delete the sample text and paste the code. Keep the mode on HTML.
- Click outside the block, then Save.
Which plans allow it
Squarespace only runs iframes and scripts in Code blocks on the Core, Plus and Advanced plans. On the Basic plan, the block shows nothing. If your site is on Basic, a text link or a button to the tool on Clooock is the simplest alternative.
Fitting the design
Squarespace templates use generous white space. A countdown with no background and black text often fits better than a colored block: choose black, no background in the sentence, or put your brand color in the c= part of the code. In the Fluid Engine editor, you can drag the block to set its width and height, and the widget follows.
On phones
Fluid Engine keeps a separate layout for phones. Switch the editor to the mobile view and check the Code block there: give it a height that suits a narrow screen, for example a little less than on desktop for a countdown. The digits shrink to fit the width, and the labels under them disappear only if the block becomes very small.