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 widgets 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/.
Then find the menu and click Settings => Custom code. Now press the button + Add Custom Code. Copy and paste the code below into the code snippet box. 
<!-- 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" />
It should look like this
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
If you always want the latest version, use latest for the <WIDGET_VERSION>.
You can find a list of widgets, versions and links here.
Using Widgets
Every widget has Server URL (that you can turn into a local Wix Velo 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: 
data-multi: true
data-network: 1
Source
Attributes
You can find a list of widgets, versions and links here.
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.
<style>
  .manifold {color: black !important;}
  .m-complete-view .m-listing-info .m-aside>button { color: black !important; }
</style>
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 modified 2mo ago