# Wix

## Basics

### Installing Widgets

#### Prerequisites:

1. Create a site on wix.com
2. Upgrade to a Paid Plan and link a custom domain (should not have `wix` in the URL). Unfortunately, Wix makes you upgrade in order to add any custom code to your site

**Example:**

Each widget comes with a Javascript and CSS file.  To add a widget to your website, you will need to add its corresponding Javascript and CSS as Custom Code in the Settings of your Wix site.

You can navigate to this by going to <https://manage.wix.com/>**.**\
In the menu, click `Settings` => `Custom code`, and press the button `+ Add Custom Code`. Copy and paste the code below into the code snippet bo&#x78;**.**&#x20;

```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%2FyjqxuSmif9sXnW44Nece%2FScreen%20Shot%202022-11-04%20at%2011.47.05%20AM.png?alt=media&#x26;token=cea872a8-10e4-4031-a478-eacc6a57af69" alt=""><figcaption><p>It should look like this</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).

### Using Widgets

Every widget has Server URL (that you can turn into a local[ Wix Velo ](https://support.wix.com/en/article/velo-about-custom-elements)file) that creates the component for you if you pass in all required attributes

**Example:**

Source

* `Server URL` : <https://connect.manifoldxyz.dev/wix/wix-connect.js>
* `Tag Name` : `manifold-connect-widget`

Attributes:&#x20;

* `data-multi`: `true`
* `data-network`: `1`

<figure><img src="https://268636785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8n4plerMUJrsrAiaKpc2%2Fuploads%2FbhWdHMM9cpuSCsd4FKBk%2FScreen%20Shot%202022-11-04%20at%2012.10.29%20PM.png?alt=media&#x26;token=3fe08995-bc1f-4e53-8076-18b4ed0b86d0" alt=""><figcaption><p>Source</p></figcaption></figure>

<figure><img src="https://268636785-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8n4plerMUJrsrAiaKpc2%2Fuploads%2FUlQNcTaPke3tATHfzYLW%2FScreen%20Shot%202022-11-04%20at%2012.11.33%20PM.png?alt=media&#x26;token=d95b2d82-355e-4147-bff3-b6ed90460b89" alt=""><figcaption><p>Attributes</p></figcaption></figure>

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

### Styling

Widgets are styled using standard CSS. You can write your own styles by creating a Custom Code block in the sites settings at manage.wix.com (Just like how you installed the widget).

You can add a code snippet like this.

```html
<style>
  .manifold {color: black !important;}
  .m-complete-view .m-listing-info .m-aside>button { color: black !important; }
</style>
```

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/wix). Please feel free to use this as a starting point to building your own dApp.