-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathwebhooks.html
208 lines (187 loc) · 11.1 KB
/
webhooks.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
<meta name="description" content="Circuit API Examples">
<meta name="author" content="Roger Urscheler">
<link rel="shortcut icon" type="image/png" href="images/wc.img" />
<title>Circuit API Examples</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script>
if (window.location.host == 'circuit.github.io' && window.location.protocol != 'https:') {
window.location.protocol = 'https:';
}
</script>
<style>
xmp {
margin: -32px 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper"></div>
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Circuit Webhooks</h1>
<p>Circuit Incoming Webhooks enable you to easily post content to a given Circuit conversation.</p>
<p>
A webhook is a specific unique URL generated by Circuit for a given user (or bot user) to post to a given conversation. <br>
<br>
In effect, the URL encapsulates the ID of the conversation, the ID of the user posting and the ID of the webhook itself. Posting to this URL does not require authentication. As a result, the URL is meant to keep secret. If it was to shared or revealed, other users could publish on behalf of the webhook owner. In case the URL may have been comprimised, it can be re-generated. <br>
<br>
This design is one of the strength of webhooks as they enable simple (friction less) integrations between applications
</p>
<p>
<strong>Pre-requisites</strong> <br>
Incoming Webhooks are available to all users if the Circuit tenant admin enabled the feature for the tenant in the Circuit administration console.
</p>
<p>
<strong>Creating a webhook</strong> <br>
<ol>
<li>Open the sidebar and click on add an app or the + button</li>
<li>Name your incoming webhook and click on Create</li>
<li>>You will get the incoming webhook URL, copy it to clipboard</li>
<li>You can post to Circuit using this URL <br> <code>curl --insecure -X POST https://yourcircuit.com/rest/v2/webhooks/incoming/1234392e25a0c-c88f-4eab-a27e-f88ccd657d17 -d '{"text": "This is the content of my post"}'</code></li>
</ol>
</p>
<p>
<strong>Formatting</strong>
<code>
<xmp>
json
{
"text": "<b>bold</b> <i>italic</i>"
}
</xmp>
</code>
<br>
Circuit supports bold, italic and highlited texts. It supports line breaks and ordered and lists with bullet points and numbered items. See the code below for examples :
<code>
<xmp>
json
{
"text" : "Circuit supports <span class='rich-text-highlight'>highlighted text</span> and <br> line breaks.
It also supports bullet lists and numbered lists with <ul><li>item1</li><li>item2</li></ul> and ><ol><li>item1</li><li>item2</li></ol>."
}
</xmp>
</code>
</p>
<p>
<strong>Example</strong> <br>
<code>circuit-call-me-button</code> <br>
In this example, a page presents a form where users can enter their name and contact details. Upon submitting, a message is posted to a Circuit conversation so that Circuit participants can see incoming requests and get back to end users. <br>
<br>
<img src="/images/incoming-webhook-example.png" alt="" width="300px;">
<br>
</p>
<pre class="prettyprint">
<xmp>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Circuit - Incoming Webhooks</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<style>
body {
background: #f7f7f7;
}
.form-box {
max-width: 500px;
margin: auto;
padding: 50px;
background: #ffffff;
border: 10px solid #f2f2f2;
}
.logo {
text-align: center;
max-width: 40%;
display: block;
margin: 0 auto 20px auto;
}
h1, p {
text-align: center;
}
input, textarea {
width: 100%;
}
input[type=submit] {
background-color: #82bd3f !important;
border: solid 1px #82bd3f !important;
}
</style>
</head>
<body>
<div class="form-box">
<img src="https://d3bql97l1ytoxn.cloudfront.net/app_resources/194960/myAppIcon/img6311084438843840511-2x.png" alt="Circuit Logo" class="logo">
<h1>Let Us Call You Back</h1>
<p>
We'd hate to make you wait.<br>
Leave us your name and phone number and we will call you right back.
</p>
<form id="callbackForm" action="" method="post">
<label for="name">Name</label>
<input id="name" type="text" name="Name">
<label for="phone">Phone</label>
<input id="phone" type="tel" name="Phone">
<label for="message">Message</label>
<textarea id="message" name="Message"></textarea>
<input class="button-primary" type="submit" value="Submit" />
</form>
</div>
<script>
var webhookUrl = 'https://beta.circuit.com/rest/v2/webhooks/incoming/d6b78c30-3f6c-4f2e-b0f5-a704e7f5e7c7';
document.querySelector("#callbackForm").addEventListener("submit", function(e) {
e.preventDefault();
var xhr = new XMLHttpRequest();
xhr.open("POST", webhookUrl, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
text: "New callback request <br>Name : " + document.getElementById('name').value + "<br>Phone Number : " + document.getElementById('phone').value + " <br>Message : " + document.getElementById('message').value
}));
});
</script>
</body>
</html>
</xmp>
</pre>
</div>
</div>
</div>
</div>
</div>
<!-- /#wrapper -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script>
$(function () {
$("#sidebar-wrapper").load("/sidebar.html");
});
</script>
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-67318539-2', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>