Simple Squarespace Site
Prerequisites
Create a site on Squarespace.
Upgrade your Squarespace account to a Business or a Commerce plan (to use the Code Injection feature).
Installing Widgets
Each widget comes with a Javascript and CSS file. To add the widgets to your website, you will need to add its corresponding Javascript and CSS as part of your site/page in the Settings
=> Advanced
=> Code Injection
tab of your Squarespace site.
In the HEADER
text field, paste the following script
and link
tags and hit "Save" in the top-left corner:
The uri for the Javascript and CSS for each widget is as follows:
If you always want the latest version, use latest for the <WIDGET_VERSION>. However, due to the changing nature of the codebase, it is possible that the "newer" latest is no longer compatible with the "previous" latest used to develop the app. It is thus recommended that you use a specific version of a widget for consistent results.
You can find a list of widgets, versions and links here.
Alternatively, if you want to add widgets only on specific pages of your site, you can opt for a page-specific header injection.
Open the page settings by hovering over the page on which you want to add the code and clicking the cog wheel (⚙️).
2. Go to the “Advanced” tab of the settings pop-up.ad
3. Paste the script
and link
tags in the textfield under the Page header code injection
tab.
4. Click “Save” on the top-left corner.
Using Widgets
Inserting widgets onto your Squarespace site is a simple process.
Select the page on which you'd like to display a widget.
Click “Edit” to edit the page.
4. Then Click "Save" on the top-left corner when you're done.
You can find a list of widgets, versions and links here.
The preview may take some time to load. If you don't see your widgets, try opening the page outside of the editor, or refreshing.
Example result
Used widgets:
Left:
m-listing-image-expandable
Right:
Top:
m-listing-name
Middle: A Squarespace text block with "Description:" and below that, a code block for
m-listing-description
Bottom: A Squarespace button block
Styling
Widgets are styled using standard CSS. You can write your own styles by adding custom CSS rules in the Design
=> Custom CSS
texfield on your Squarespace page.
Some widgets may include links pointing to additional stylesheets. These additional stylesheets (usually named <WIDGET_NAME>.manifold-light.css
or <WIDGET_NAME>.manifold-dark.css
) build on top of the base stylesheet (usually named <WIDGET_NAME>.css
), thus the additional stylesheets should be included after the base one.
Examples
Examples of commonly used features can be found here. Please feel free to use this as a starting point to building your own dApp.
Last updated