# Simple Squarespace Site

### Prerequisites

1. Create a site on Squarespace.
2. Upgrade your Squarespace account to a Business or a Commerce plan (to use the [Code Injection](https://support.squarespace.com/hc/en-us/articles/205815908-Using-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:

```html
<!-- connect widget -->
<script async src="https://connect.manifoldxyz.dev/2.0.13/connect.umd.min.js"></script>
<link rel="stylesheet" href="https://connect.manifoldxyz.dev/2.0.13/connect.css" />
<!-- marketplace widget -->
<script async src="https://marketplace.manifoldxyz.dev/latest/marketplace.umd.min.js"></script>
<link rel="stylesheet" href="https://marketplace.manifoldxyz.dev/latest/marketplace.css" />
```

<figure><img src="https://268636785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8n4plerMUJrsrAiaKpc2%2Fuploads%2FxJkfeJbk7w0RtZHcpLna%2FsiteWideHeader.png?alt=media&#x26;token=dfbb850a-317a-4336-b26c-83b294e27345" alt=""><figcaption><p>Settings > Advanced > Code Injection</p></figcaption></figure>

The uri for the Javascript and CSS for each widget is as follows:

```
https://<WIDGET_NAME>.manifoldxyz.dev/<WIDGET_VERSION>/<WIDGET_NAME>.umd.min.js
https://<WIDGET_NAME>.manifoldxyz.dev/<WIDGET_VERSION>/<WIDGET_NAME>.css
```

{% hint style="warning" %}
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.
{% endhint %}

You can find a list of widgets, versions and links [here](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/directory).

Alternatively, if you want to add widgets only on **specific** pages of your site, you can opt for a page-specific header injection.

1. Open the page settings by hovering over the page on which you want to add the code and clicking the cog wheel (⚙️).

![](https://268636785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8n4plerMUJrsrAiaKpc2%2Fuploads%2F4d31croxS67jgirNcUI9%2Fnew-page_settings.png?alt=media\&token=6cc5c8b6-a3ca-4e5c-9c4d-74f6a85deab8)

2\. Go to the “Advanced” tab of the settings pop-up.ad

![](https://268636785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8n4plerMUJrsrAiaKpc2%2Fuploads%2FVl2WNU2B6YZFfocatYR5%2Fsquarespace-head_injection.png?alt=media\&token=4fe978d2-5770-4d5b-a52c-065992fd2172)

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.

1. Select the page on which you'd like to display a widget.
2. Click “Edit” to edit the page.

   <figure><img src="https://268636785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8n4plerMUJrsrAiaKpc2%2Fuploads%2FZHH4SPQuaFCIDMVop9X5%2Fedit-page.png?alt=media&#x26;token=2ce037b5-011c-4b22-b1a8-6d501de58ae4" alt=""><figcaption><p>Edit page</p></figcaption></figure>
3. Add your desired marketplace widget through the “code” blocks.![](https://268636785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8n4plerMUJrsrAiaKpc2%2Fuploads%2FN13Cp258kWLUAejFJiy9%2Fcode-blocks.png?alt=media\&token=ba0fbd11-ea1b-4fb4-9c03-6672dfefbb7b)

```html
<div
    data-widget="m-listing-name"
    data-id="19"
    data-network="5">
</div>
```

4\. Then Click "Save" on the top-left corner when you're done.

You can find a list of widgets, versions and links [here](https://docs.manifold.xyz/manifold-for-developers/resources/widgets/directory).

{% hint style="info" %}
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.
{% endhint %}

#### 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

<figure><img src="https://268636785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8n4plerMUJrsrAiaKpc2%2Fuploads%2FtDmOxEgSNuVff6vgW8nv%2Fsquarespace-page.png?alt=media&#x26;token=288cf9c5-aa79-4c6d-b179-45983f2700be" alt=""><figcaption><p>Squarespace page with some Marketplace listing widgets</p></figcaption></figure>

### 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](https://github.com/manifoldxyz/manifold-templates/tree/main/squarespace/). Please feel free to use this as a starting point to building your own dApp.