Skip to content

Commit 2a026fb

Browse files
ConnorDriveWorksConnorDriveWorks
authored
Merge pull request #1 from DriveWorks/develop
Initial public release (1.3.1) with setup guide
2 parents 63ed1b4 + 051e566 commit 2a026fb

4 files changed

Lines changed: 223 additions & 18 deletions

File tree

‎LICENSE‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,9 @@
11
MIT License
22

3-
Copyright (c) 2021 DriveWorks
3+
Copyright (C) 2020 DriveWorks Ltd
44

5-
Permission is hereby granted, free of charge, to any person obtaining a copy
6-
of this software and associated documentation files (the "Software"), to deal
7-
in the Software without restriction, including without limitation the rights
8-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9-
copies of the Software, and to permit persons to whom the Software is
10-
furnished to do so, subject to the following conditions:
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of this example and associated documentation files (the "Example"), to deal in the Example without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Example, and to permit persons to whom the Example is furnished to do so, subject to the following conditions:
116

12-
The above copyright notice and this permission notice shall be included in all
13-
copies or substantial portions of the Software.
7+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Example.
148

15-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21-
SOFTWARE.
9+
THE EXAMPLE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE EXAMPLE OR THE USE OR OTHER DEALINGS IN THE EXAMPLE.

‎README.md‎

Lines changed: 50 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,50 @@
1-
# IntegrationThemeExample-SimpleEmbedded
2-
A DriveWorks form embedded within a page - using the Integration Theme Web API.
1+
# DriveWorks Live - Integration Theme Example - Embedded Form
2+
### Version: 1.3.1
3+
#### Minimum DriveWorks Version: 18.0
4+
5+
A distributable template that renders a predefined project into an embedded section of the page - set via a config file.
6+
7+
Please note: DriveWorks are not accepting pull requests for this example.
8+
Join our [online community](https://my.driveworks.co.uk) for discussion, resources and to suggest other examples.
9+
10+
### This example:
11+
- Renders a DriveWorks Form embedded within page content - no other UI
12+
- Uses very simple HTML/CSS/JS
13+
- Has an optional loading state (to avoid an initial empty output)
14+
15+
### To use:
16+
1. Clone this repository, or download as a .zip
17+
18+
2. Enter your Integration Theme details into `config.js`
19+
* `serverUrl` - The URL that hosts your Integration Theme, including any ports.
20+
* `groupAlias` - The public alias created for the Group containing the project to render - as configured in DriveWorksConfigUser.xml.
21+
* This *must* be specified for each Group you wish to use.
22+
* This allows you to mask the true Group name publicly, if desired.
23+
* See [Integration Theme Settings](https://docs.driveworkspro.com/Topic/IntegrationThemeSettings) for additional guidance.
24+
* `projectName` - The name of the Project to render.
25+
* `specificationPingInterval` - [optional] The interval at which to 'ping' the server automatically
26+
* This ensures a session is kept alive during inactivity, if desired.
27+
28+
3. In `index.html`, replace "YOUR-DRIVEWORKS-LIVE-SERVER-URL" with the URL of your own DriveWorks Live server that is serving `DriveWorksLiveIntegrationClient.min.js` - including any ports.
29+
* This should be the URL that hosts the Integration Theme, and serves it's landing page.
30+
* To check that this URL is correct, attempt to load DriveWorksLiveIntegrationClient.min.js in a browser. It should return a minified code library.
31+
32+
4. Host the example locally or on a remote server.
33+
* Ensure `<corsOrigins>` in DriveWorksConfigUser.xml permits request from this location.
34+
See [Integration Theme Settings](https://docs.driveworkspro.com/Topic/IntegrationThemeSettings) for additional guidance.
35+
36+
5. If encountering any issues, check the browser's console for error messages (F12)
37+
38+
### Potential Issues:
39+
* When serving this example for a domain different to your DriveWorks Live server, e.g. api.my-site.com from company.com, 'SameSite' cookie warnings may be thrown when the Client SDK attempts to store the current session id.
40+
* This appears as "Error: 401 Unauthorized" in the browser console, even with the correct configuration set.
41+
* To resolve:
42+
* Ensure you are running DriveWorks 18.2 or above, HTTPS is enabled in DriveWorks Live's settings and a valid SSL certificate has been configured via DriveWorksConfigUser.xml.
43+
* See [Integration Theme Settings](https://docs.driveworkspro.com/Topic/IntegrationThemeSettings) for additional guidance.
44+
45+
---
46+
47+
This source code has been made available to demonstrate how you can integrate with DriveWorks using the DriveWorks Live API.
48+
This code is provided under the MIT license, for more details see LICENSE.md.
49+
50+
The example requires that you have the latest DriveWorks Live SDK installed, operational and remotely accessible.

‎config.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// Update these values to match those of your Server URL, DriveWorks Group Alias
2+
// and Project Name that you wish to be rendered.
3+
4+
const config = {
5+
serverUrl: "",
6+
groupAlias: "",
7+
projectName: "",
8+
// (Optional) Set Specification ping interval - in seconds
9+
// A Specification will timeout after a configured period of inactivity (see DriveWorksConfigUser.xml).
10+
// This function prevents a Specification timing out as long as the page is in view.
11+
// Disable the ping by changing the setting to 0
12+
specificationPingInterval: 0,
13+
};

‎index.html‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
9+
<title>Simple Example - Embedded | DriveWorks</title>
10+
11+
<style>
12+
13+
html,
14+
body {
15+
height: 100%;
16+
margin: 0;
17+
font-size: 16px;
18+
font-family: sans-serif;
19+
background-color: #eee;
20+
}
21+
22+
.output {
23+
position: relative;
24+
min-height: 15em;
25+
margin: 2em 0;
26+
background-color: #fff;
27+
}
28+
29+
/* (Optional) Loading Styles */
30+
.output.is-loading::before {
31+
content: "";
32+
position: absolute;
33+
display: block;
34+
font-size: 4em;
35+
width: 1em;
36+
height: 1em;
37+
top: 50%;
38+
left: 50%;
39+
margin: -0.5em 0 0 -0.5em;
40+
border: 10px solid #ddd;
41+
border-top: 10px solid #222;
42+
border-radius: 50%;
43+
box-sizing: border-box;
44+
animation: spin 1s linear infinite;
45+
}
46+
47+
@keyframes spin {
48+
0% { transform: rotate(0deg); }
49+
100% { transform: rotate(360deg); }
50+
}
51+
52+
/* Demo Site Structure */
53+
.demo-site {
54+
max-width: 1200px;
55+
padding: 3em 1.25em;
56+
margin: 0 auto;
57+
}
58+
59+
h1 {
60+
font-size: 2em;
61+
margin: 0 0 1em;
62+
}
63+
64+
p {
65+
font-size: 1.25em;
66+
line-height: 1.4;
67+
margin: 0 0 1em;
68+
}
69+
70+
</style>
71+
72+
</head>
73+
74+
<body>
75+
76+
<div class="demo-site">
77+
78+
<h1>Engage customers with a configurator embedded on your website.</h1>
79+
<p>Below is a Specification embedded directly into existing page content - without an iFrame.</p>
80+
81+
<!-- Render Area -->
82+
<div id="specification-output" class="output is-loading"></div>
83+
84+
<p>You can use the Web API to embed DriveWorks Forms anywhere in a new or existing website.</p>
85+
<p>Any visitors can then interact with your Form, just like any other site feature, using native web technologies in modern browsers.</p>
86+
<p>A Form can be placed deep within the structure of a site, and responds to the width of the container & browser.</p>
87+
88+
</div>
89+
90+
<!-- Load Client SDK library -->
91+
<!-- Replace "YOUR-DRIVEWORKS-LIVE-SERVER-URL" with your DriveWorks Live server address, which serves the landing page -->
92+
<script src="https://YOUR-DRIVEWORKS-LIVE-SERVER-URL/DriveWorksLiveIntegrationClient.min.js"></script>
93+
94+
<!-- Load Configuration -->
95+
<script src="config.js"></script>
96+
97+
<script async>
98+
99+
const specificationOutput = document.getElementById("specification-output");
100+
101+
// Create DriveWorks API client
102+
const DW_CLIENT = new window.DriveWorksLiveClient(config.serverUrl);
103+
104+
// Run on load
105+
(async function () {
106+
107+
try {
108+
109+
// Login to group
110+
const session = await DW_CLIENT.loginGroup(config.groupAlias);
111+
112+
// Create new specification
113+
const specification = await DW_CLIENT.createSpecification(config.groupAlias, config.projectName);
114+
115+
// Render specification
116+
await specification.render(specificationOutput);
117+
118+
// Remove loading style
119+
specificationOutput.classList.remove("is-loading");
120+
121+
// (Optional) Prevent Specification timeout
122+
pingSpecification(specification);
123+
124+
} catch (error) {
125+
console.log(error);
126+
}
127+
128+
})();
129+
130+
/**
131+
* Prevent Specification timeout
132+
*
133+
* A Specification will timeout after a configured period of inactivity (see DriveWorksConfigUser.xml).
134+
* This function prevents a Specification timing out as long as the page is in view.
135+
*
136+
* @param specification The Specification object.
137+
*/
138+
function pingSpecification(specification) {
139+
140+
// Disable ping if interval is 0
141+
if (config.specificationPingInterval === 0) {
142+
return;
143+
}
144+
145+
// Ping Specification to reset timeout
146+
specification.ping();
147+
148+
// Schedule next ping
149+
setTimeout(pingSpecification, config.specificationPingInterval * 1000, specification);
150+
151+
}
152+
153+
</script>
154+
155+
</body>
156+
</html>

0 commit comments

Comments
 (0)