# 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="/files/txARKDzLzERZ0IWizyYO" 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](/manifold-for-developers/resources/widgets/directory.md).

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 (⚙️).

![](/files/QrhrYiFx5yEFCp7PwLER)

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

![](/files/bO5FnhkSKxVSaXsZYQAh)

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="/files/tLisjhDZm2IG4TbFNehp" alt=""><figcaption><p>Edit page</p></figcaption></figure>
3. Add your desired marketplace widget through the “code” blocks.![](/files/9cOJA90dlRdxz3jcZjzt)

```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](/manifold-for-developers/resources/widgets/directory.md).

{% 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="/files/hu2ZjQgbqF5CFKUt8JXt" 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.manifold.xyz/manifold-for-developers/guides/squarespace/simple-squarespace-site.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.