Added basic settle widget functinality

settle-club · Jun 25, 2024 · 8d48b83 · 8d48b83
1 parent 1e06dcc
commit 8d48b83
Show file tree

Hide file tree

Showing 4 changed files with 897 additions and 2 deletions.
diff --git a/Basic/README.md b/Basic/README.md
@@ -0,0 +1,59 @@
+# Basic Widget
+
+### Default Configuration
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Widget Example</title>
+    <script
+      src="https://cdn.pixelbin.io/v2/potlee/original/settle-widget.js"
+      defer
+    ></script>
+  </head>
+  <body>
+    <settle-widget totalOrderValue="1200" />
+  </body>
+</html>
+```
+
+#### Result:
+![Default Widget Preview](https://cdn.pixelbin.io/v2/potlee/original/public/documentation/settle-widget/settle-widget-card.png)
+
+![Default Widget Preview](https://cdn.pixelbin.io/v2/potlee/original/public/documentation/settle-widget/settle-widget.png)
+
+### Custom Configuration
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Custom Widget Example</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script
+      src="https://cdn.pixelbin.io/v2/potlee/original/settle-widget.js"
+      defer
+    ></script>
+  </head>
+  <body>
+    <div id="settle-widget-container"></div>
+    <settle-widget
+      totalOrderValue="1200"
+      selector="#settle-widget-container"
+      buttonText="in flexible installments"
+      logoPosition="left"
+      theme="rgb(0, 0, 0)"
+      productName="Black T-Shirt"
+    />
+  </body>
+</html>
+```
+
+#### Result:
+![Default Widget Preview](https://cdn.pixelbin.io/v2/potlee/original/public/documentation/settle-widget/custom-settle-widget-card.png)
+
+![Default Widget Preview](https://cdn.pixelbin.io/v2/potlee/original/public/documentation/settle-widget/custom-settle-widget.png)
diff --git a/Basic/widget-popup.html b/Basic/widget-popup.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <title>Popup</title>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Website</title>
+    <script src="widget.js"></script>
+  </head>
+  <body>
+    <div id="popup-widget"></div>
+    <settle-widget
+      totalOrderValue="3000"
+      productName="Your Product Name"
+      showProductName="true"
+      theme="rgb(102, 102, 0)"
+      logoPosition="left"
+      buttonText="in flexible installments"
+      currency="$"
+    />
+
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        setTimeout(() => {
+          new SettlePopupWidget({
+            selector: "#popup-widget",
+            currency: "₹",
+            emiTenure: 3,
+            totalOrderValue: "3000",
+            showProductName: false,
+            theme: "rgb(155, 102, 0)",
+            logoPosition: "right",
+            buttonText: "",
+          });
+        }, 1000);
+      });
+    </script>
+  </body>
+</html>