Manifold for Developers
Search…
⌃K
Links

HTML

Basics

Installing Widgets

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 to the <head> of your website.
Example:
<head>
<script src="https://connect.manifoldxyz.dev/latest/connect.umd.min.js"></script>
<link rel="stylesheet" href="https://connect.manifoldxyz.dev/latest/connect.css">
</head>
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

To use a widget, simply add a <div> in the <body> of your website corresponding to the widget you want to use.
Example:
<body>
<div
data-widget="m-connect"
data-grant-type="<your app grant type, `signature` or `token`>"
data-client-id="<your app client id>"
data-app-name="<your app name>"
data-network="<your desired network's chain id>"
>
</div>
</body>
You can find a list of widgets, versions and links here.

Styling

Widgets are styled using standard CSS.

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.