diff --git a/README.md b/README.md
index a6c0729..a79be3b 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,7 @@
## Getting started
- How tos & guides:
+ - [Commit Widget](./docs/commit-widget.md)
- [Redemption Widget](./docs/redemption-widget.md)
- Finance Widget
- [Local development](docs/local-development.md)
diff --git a/config-overrides.js b/config-overrides.js
index e904df9..f87de32 100644
--- a/config-overrides.js
+++ b/config-overrides.js
@@ -3,10 +3,18 @@
const {
override,
addWebpackResolve,
- addWebpackPlugin
+ addWebpackPlugin,
+ overrideDevServer
} = require("customize-cra");
const webpack = require("webpack");
+const devServerConfig = () => (config) => {
+ return {
+ ...config,
+ open: ["/#/dev"]
+ };
+};
+
module.exports = {
// The Webpack config to use when compiling your react app for development or production.
webpack: override(
@@ -33,5 +41,6 @@ module.exports = {
// process: "process/browser"
// })
)
- )
+ ),
+ devServer: overrideDevServer(devServerConfig())
};
diff --git a/docs/assets/commit-widget/1-commit-widget-overall.png b/docs/assets/commit-widget/1-commit-widget-overall.png
new file mode 100644
index 0000000..c19b0d6
Binary files /dev/null and b/docs/assets/commit-widget/1-commit-widget-overall.png differ
diff --git a/docs/assets/commit-widget/2-commit-button.png b/docs/assets/commit-widget/2-commit-button.png
new file mode 100644
index 0000000..f4850af
Binary files /dev/null and b/docs/assets/commit-widget/2-commit-button.png differ
diff --git a/docs/commit-widget.md b/docs/commit-widget.md
new file mode 100644
index 0000000..dfeeda8
--- /dev/null
+++ b/docs/commit-widget.md
@@ -0,0 +1,102 @@
+[](https://bosonprotocol.io)
+
+< [Boson Protocol Widgets](../README.md)
+
+# The Commit Widget
+
+## Integrating ‘Commit’ functionality using the Boson Widget
+
+With the Boson Commit Widget Sellers can allow their customers to commit to a Boson offer on their own domains.
+
+The Boson Commit Widget allows Sellers to simply embed, via a few lines of code, commit functionality of their products into an existing website.
+
+
+
+To integrate the Boson Commit Widget, all a seller needs to do is:
+
+ 1. Add the following `
+```
+
+ 2. The Seller then needs to create a button with the fragment identifier *id="boson-commit"*. When clicked, the commit modal will popup on the Seller's website.
+```
+
+```
+
+The button shall be parameterized with the following arguments:
+- ```data-config-id```: specifies the Boson Configuration addressed by the widget (here ***production-137-0*** is the production configuration deployed on the Polygon blockchain). See [Boson Environment](./boson-environments.md) to get more details.
+- ```data-seller-id```: specifies the Boson Seller ID that publishes the Product being offered with the plugin
+- ```data-product-uuid```: specifies the ProductUUID of the Product being offered with the plugin
+
+When a user will click the "Show Commit" button, the Commit Widget will popup and allow the user to:
+- show details about the specified Product
+- connect their web3 wallet
+- commit to the Product (assuming they have connected their wallet, and have enough funds to commit)
+
+## Using the Boson Commit Button
+
+As a seller you can also choose to use the Boson branded "Commit" Button on your website, if you would like to do this, all you need to do is:
+
+ 1. Add the below 2 lines of code in HTML `` section:
+```
+
+ ...
+
+
+
+```
+
+2. Add the below class name to the "boson-commit" button:
+```
+
+```
+
+
+
+## Integrating the Commit Widget as an iFrame
+
+Instead of using the Commit Button as shown above, the Commit widget can be embedded in any web page using an iFrame HTML tag.
+
+For instance:
+```
+
+```
+
+In which case the page:
+- does not need to include any specific line (like the ```
+
+
+
+
+
+
+