Skip to content

Commit 0445533

Browse files
forstisabellaforstisabella
authored
Merge pull request #4547 from segmentio/dummy-form-test
Added sample form to Spec pages
2 parents 826eb8d + d7479c9 commit 0445533

File tree

14 files changed

+636
-0
lines changed

14 files changed

+636
-0
lines changed

‎src/_includes/components/codepens/group-spec.html

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"
2+
integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ=="
3+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4+
<script type="text/javascript">
5+
function showMessage() {
6+
var name = document.getElementById("name").value;
7+
var industry = document.getElementById("industry").value;
8+
var employees = document.getElementById("employees").value;
9+
var plan = document.getElementById("plan").value;
10+
var totalBilled = document.getElementById("totalBilled").value;
11+
var user_agent = window.navigator.userAgent
12+
var ts = Date.now()
13+
var date = new Date(ts)
14+
var now = date.toISOString()
15+
var received = ts + 233
16+
var received_ts = new Date(received)
17+
var received_iso = received_ts.toISOString()
18+
var output = `{
19+
"anonymousId": "507f191e810c19729de860ea",
20+
"channel": "browser",
21+
"context": {
22+
"ip": "8.8.8.8",
23+
"userAgent": "${user_agent}"
24+
},
25+
"integrations": {
26+
"All": true,
27+
"Mixpanel": false,
28+
"Salesforce": false
29+
},
30+
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
31+
"receivedAt": "${received_iso}",
32+
"sentAt": "${now}",
33+
"timestamp": "${now}",
34+
"traits": {
35+
"name": "${name}",
36+
"industry": "${industry}",
37+
"employees": ${employees},
38+
"plan": "${plan}",
39+
"total billed": ${totalBilled}
40+
},
41+
"type": "group",
42+
"userId": "97980cfea0067",
43+
"groupId": "0e8c78ea9d97a7b8185e8632",
44+
"version": "1.1"
45+
}`
46+
output_container.innerHTML = output
47+
Prism.highlightElement(output_container)
48+
}
49+
50+
</script>
51+
<script>
52+
function showOutput() {
53+
var show = document.getElementById("output-code");
54+
if (show.style.display === "block") {
55+
show.style.display = "none";
56+
} else {
57+
show.style.display = "block";
58+
}
59+
}
60+
61+
</script>
62+
63+
<div class="sample-code-container">
64+
<div class="form">
65+
<h3> Sample Group call</h3>
66+
<div class="sample-form">
67+
<label for="name">Name:</label>
68+
<input type="text" id="name">
69+
<label for="industry">Title:</label>
70+
<input type="text" id="industry">
71+
<label for="employees">Employees:</label>
72+
<input type="text" id="employees">
73+
<label for="plan">Plan:</label>
74+
<input type="text" id="plan">
75+
<label for="totalBilled">Total Billed:</label>
76+
<input type="text" id="totalBilled">
77+
<input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()"
78+
value="See a sample group call">
79+
</div>
80+
</div>
81+
82+
83+
<div class="output">
84+
<h4>Sample Group Call</h4>
85+
<pre class="language-javascript"><code class="language-javascript" id="output_container">
86+
Sample output goes here!
87+
</code></pre>
88+
</div>
89+
</div>

‎src/_includes/components/codepens/identify-spec.html

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"
2+
integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ=="
3+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4+
<script type="text/javascript">
5+
function showMessage() {
6+
var name = document.getElementById("name").value;
7+
var email = document.getElementById("email").value;
8+
var plan = document.getElementById("plan").value;
9+
var logins = document.getElementById("logins").value;
10+
var street = document.getElementById("street").value;
11+
var city = document.getElementById("city").value;
12+
var state = document.getElementById("state").value;
13+
var postcode = document.getElementById("postcode").value;
14+
var country = document.getElementById("country").value;
15+
var user_agent = window.navigator.userAgent
16+
var ts = Date.now()
17+
var date = new Date(ts)
18+
var now = date.toISOString()
19+
var received = ts + 233
20+
var received_ts = new Date(received)
21+
var received_iso = received_ts.toISOString()
22+
var output = `{
23+
"anonymousId": "507f191e810c19729de860ea",
24+
"channel": "browser",
25+
"context": {
26+
"ip": "8.8.8.8",
27+
"userAgent": "${user_agent}"
28+
},
29+
"integrations": {
30+
"All": false,
31+
"Mixpanel": true,
32+
"Salesforce": true
33+
},
34+
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
35+
"receivedAt": "${received_iso}",
36+
"sentAt": "${now}",
37+
"timestamp": "${now}",
38+
"traits": {
39+
"name": "${name}",
40+
"email": "${email}",
41+
"plan": "${plan}",
42+
"logins": ${logins},
43+
"address": {
44+
"street": "${street}",
45+
"city": "${city}",
46+
"state": "${state}",
47+
"postalCode": "${postcode}",
48+
"country": "${country}"
49+
}
50+
},
51+
"type": "identify",
52+
"userId": "97980cfea0067",
53+
"version": "1.1"
54+
}`
55+
output_container.innerHTML = output
56+
Prism.highlightElement(output_container)
57+
}
58+
59+
</script>
60+
<script>
61+
function showOutput() {
62+
var show = document.getElementById("output-code");
63+
if (show.style.display === "block") {
64+
show.style.display = "none";
65+
} else {
66+
show.style.display = "block";
67+
}
68+
}
69+
70+
</script>
71+
72+
<div class="sample-code-container">
73+
<div class="form">
74+
<h4> Sample Identify </h4>
75+
<div class="sample-form">
76+
<label for="name">Name:</label>
77+
<input type="text" id="name">
78+
<label for="email">Email:</label>
79+
<input type="text" id="email">
80+
<label for="plan">Plan:</label>
81+
<input type="text" id="plan">
82+
<label for="logins">Logins:</label>
83+
<input type="text" id="logins">
84+
<label for="street">Street:</label>
85+
<input type="text" id="street">
86+
<label for="city">City:</label>
87+
<input type="text" id="city">
88+
<label for="state">State:</label>
89+
<input type="text" id="state">
90+
<label for="postcode">Zip Code:</label>
91+
<input type="text" id="postcode">
92+
<label for="country">Country:</label>
93+
<input type="text" id="country">
94+
<input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()" value="See a sample identify call">
95+
</div>
96+
</div>
97+
98+
<div class="output">
99+
<h4>Sample Identify Call</h4>
100+
<pre><code class="language-javascript" id="output_container">Sample output goes here!</code></pre>
101+
</div>
102+
</div>

‎src/_includes/components/codepens/page-spec.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"
2+
integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ=="
3+
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4+
<script type="text/javascript">
5+
function showMessage() {
6+
var name = "Page call Spec"
7+
var title = document.title
8+
var url = window.location.href
9+
var user_agent = window.navigator.userAgent
10+
var ts = Date.now()
11+
var date = new Date(ts)
12+
var now = date.toISOString()
13+
var received = ts + 233
14+
var received_ts = new Date(received)
15+
var received_iso = received_ts.toISOString()
16+
var output = `{
17+
"anonymousId": "507f191e810c19729de860ea",
18+
"channel": "browser",
19+
"context": {
20+
"ip": "8.8.8.8",
21+
"userAgent": "${user_agent}"
22+
},
23+
"integrations": {
24+
"All": true,
25+
"Mixpanel": false,
26+
"Salesforce": false
27+
},
28+
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
29+
"name": "${name}",
30+
"properties": {
31+
"title": "${title}",
32+
"url": "${url}"
33+
},
34+
"receivedAt": "${received_iso}",
35+
"sentAt": "${now}",
36+
"timestamp": "${now}",
37+
"type": "page",
38+
"userId": "97980cfea0067",
39+
"version": "1.1"
40+
}`
41+
output_container.innerHTML = output
42+
Prism.highlightElement(output_container)
43+
}
44+
45+
</script>
46+
<script>
47+
function showOutput() {
48+
var show = document.getElementById("output_container");
49+
if (show.style.display === "block") {
50+
show.style.display = "none";
51+
} else {
52+
show.style.display = "block";
53+
}
54+
}
55+
56+
</script>
57+
58+
<div class="sample-code-container">
59+
<div class="form">
60+
<h4> Make a Page Call </h4>
61+
<div class="sample-form">
62+
<input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()"
63+
value="See a sample page call" />
64+
</div>
65+
</div>
66+
67+
<div class="output">
68+
<h4>Sample Page Call</h4>
69+
<pre class="language-javascript code-output"><code class="language-javascript" id="output_container">
70+
71+
</code></pre>
72+
</div>
73+
</div>

‎src/_includes/components/codepens/screen-spec.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js" integrity="sha512-UOoJElONeUNzQbbKQbjldDf9MwOHqxNz49NNJJ1d90yp+X9edsHyJoAs6O4K19CZGaIdjI5ohK+O2y5lBTW6uQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
2+
<script type="text/javascript">
3+
function showMessage(){
4+
var name = document.getElementById("name").value;
5+
var variation = document.getElementById("variation").value;
6+
var ts = Date.now()
7+
var date = new Date(ts)
8+
var now = date.toISOString()
9+
var received = ts + 233
10+
var received_ts = new Date(received)
11+
var received_iso = received_ts.toISOString()
12+
var output =
13+
`{
14+
"anonymousId": "3a12eab0-bca7-11e4-8dfc-aa07a5b093db",
15+
"channel": "mobile",
16+
"context": {
17+
"ip": "8.8.8.8"
18+
},
19+
"integrations": {
20+
"All": true,
21+
"Mixpanel": false,
22+
"Salesforce": false
23+
},
24+
"messageId": "022bb90c-bbac-11e4-8dfc-aa07a5b093db",
25+
"name": "Dropdown selected",
26+
"properties": {
27+
"variation": "${variation}"
28+
},
29+
"receivedAt": "${received_iso}",
30+
"sentAt": "${now}",
31+
"timestamp": "${now}",
32+
"type": "screen",
33+
"userId": "97980cfea0067",
34+
"version": "1.1"
35+
}`
36+
output_container.innerHTML = output
37+
Prism.highlightElement(output_container)
38+
}
39+
</script>
40+
<script>
41+
function showOutput() {
42+
var show = document.getElementById("output-code");
43+
if (show.style.display === "block") {
44+
show.style.display = "none";
45+
} else {
46+
show.style.display = "block";
47+
}
48+
}
49+
</script>
50+
51+
<div class="sample-code-container">
52+
<div class="form">
53+
<h4> Sample Screen </h4>
54+
<!-- <label for="name">Name:</label>
55+
<input type="text" id="name"><br> -->
56+
<div class="sample-form">
57+
<label for="variation">Variation:</label>
58+
59+
60+
<!-- <input type="text" id="variation"><br> -->
61+
<select name="variation" id="variation">
62+
<option value="blue">Blue</option>
63+
<option value="green">Green</option>
64+
<option value="red">Red</option>
65+
</select>
66+
<input type="submit" class="button button-hollow" id="submit" onclick="showMessage(); showOutput()" value="See a sample Screen call">
67+
</div>
68+
</div>
69+
70+
<div class="output">
71+
<h4>Sample Screen Call</h4>
72+
<pre class="language-javascript"><code class="language-javascript" id="output_container">
73+
Sample output goes here!
74+
</code></pre>
75+
</div>
76+
</div>

0 commit comments

Comments
 (0)