-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdev.html
77 lines (73 loc) · 3.13 KB
/
dev.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>DEV widget</title>
<meta name="description" content="DEV widget embedded in restaurant website" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--
Important Note for Users:
Copy and paste this script into your website's HTML.
Place it in either the <head> or <body> section of your website's HTML document.
Ensure that you only place this script once per page/website to avoid duplicate executions.
-->
<script>
const params = new URL(document.location).searchParams;
const script = document.createElement("script");
script.src = "https://s3-ap-southeast-1.amazonaws.com/widget.dev.letsumai.com/dist/embed.min.js";
script.setAttribute("data-api-key", params.get("apiKey") || "66ec67a8-6fce-41b0-8352-4d2eb02876f5");
script.setAttribute("data-widget-type", "reservation");
document.head.appendChild(script);
</script>
<script type="text/javascript">
function init() {
const params = new URL(document.location).searchParams;
const apiKey = params.get("apiKey");
/**
* Explanation for users:
* - Enter button selectors (IDs or classes) are comma-separated list without spaces and match button on your page.
* - Button selectors must be valid according to the CSS selector rules used by `querySelectorAll`.
*
* Valid formats:
* - IDs: #button1 or #button2
* - Classes: .btn1 or .btn-custom
* - Attribute selectors: [id="specialButton"]
*
* For details on valid CSS selector syntax, see:
* https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
*/
["#make-reservation"].forEach((id) => {
// Use `document.querySelectorAll` to find all elements matching the CSS selector in the custom button input.
var links = document.querySelectorAll(id);
links.forEach((link) => {
// Attach a click event listener to each selected element.
link.addEventListener("click", function (e) {
e.preventDefault();
// Configure the `umaiWidget` with the provided `apiKey` and `widgetType`.
umaiWidget.config({
apiKey: apiKey || "66ec67a8-6fce-41b0-8352-4d2eb02876f5",
widgetType: "reservation",
});
// Open the widget modal when an element is clicked.
umaiWidget.openWidget();
return false;
});
});
});
}
/**
* Attaching `init` function when the page has fully loaded.
* It sets up event listeners for specific elements that match the provided custom button.
* Each matching element will trigger the `umaiWidget` with a specified configuration when clicked.
*/
document.addEventListener("DOMContentLoaded", init);
window.addEventListener("mercury:load", init);
</script>
</head>
<body style="background-color: #f4f4f4;">
<h1>DEV</h1>
<h2>Welcome to my Restaurant!</h2>
<button type="button" id="make-reservation">Make a reservation!</button>
</body>
</html>