-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (107 loc) · 4.14 KB
/
index.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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Example - Embedded | DriveWorks</title>
<style>
html,
body {
height: 100%;
margin: 0;
font-size: 16px;
font-family: sans-serif;
background-color: #eee;
}
.output {
position: relative;
min-height: 15em;
margin: 2em 0;
background-color: #fff;
}
/* (Optional) Loading Styles */
.output.is-loading::before {
box-sizing: border-box;
content: '';
position: absolute;
display: block;
font-size: 4em;
width: 1em;
height: 1em;
top: 50%;
left: 50%;
margin: -0.5em 0 0 -0.5em;
border: 10px solid #ddd;
border-top: 10px solid #222;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Demo Site Structure */
.demo-site {
max-width: 1200px;
padding: 3em 1.25em;
margin: 0 auto;
}
h1 {
font-size: 2em;
margin: 0 0 1em;
}
p {
font-size: 1.25em;
line-height: 1.4;
margin: 0 0 1em;
}
</style>
</head>
<body>
<div class="demo-site">
<h1>Engage customers with a configurator embedded on your website.</h1>
<p>Below is a Specification embedded directly into existing page content - without an iFrame.</p>
<!-- Render Area -->
<div id="specification-output" class="output is-loading"></div>
<p>You can use the Web API to embed DriveWorks Forms anywhere in a new or existing website.</p>
<p>Any visitors can then interact with your Form, just like any other site feature, using native web technologies in modern browsers.</p>
<p>A Form can be placed deep within the structure of a site, and responds to the width of the container & browser.</p>
</div>
<!-- Scripts -->
<script src="config.js"></script>
<script>
const specificationOutput = document.getElementById("specification-output");
// Run on load
async function dwClientLoaded() {
try {
// Create DriveWorks API client
const DW_CLIENT = new window.DriveWorksLiveClient(config.serverUrl);
// Login to group
const session = await DW_CLIENT.loginGroup(config.groupAlias);
// Create new specification
const specification = await DW_CLIENT.createSpecification(config.groupAlias, config.projectName);
// Render specification
await specification.render(specificationOutput);
// Remove loading style
specificationOutput.classList.remove("is-loading");
// Prevent Specification timeout from inactivity, as long as the page is in view.
// A Specification will timeout after a configured period of inactivity (see DriveWorksConfigUser.xml).
specification.enableAutoPing(config.specificationPingInterval);
} catch (error) {
console.log(error);
}
}
</script>
<!-- OPTION A) Directly load Client Library -->
<!-- <script src="https://YOUR-DRIVEWORKS-LIVE-SERVER-URL.COM/DriveworksLiveIntegrationClient.min.js" onload="dwClientLoaded()"></script> -->
<!-- OPTION B) Inject Client Library dynamically from server url in config file -->
<script>
(function(doc, script) {
script = doc.createElement("script");
script.src = config.serverUrl + "/DriveWorksLiveIntegrationClient.min.js";
script.onload = () => dwClientLoaded(); // Custom local function run when client has loaded
doc.body.appendChild(script);
}(document));
</script>
</body>
</html>