Slack setup instructions

static/css/channels.css

@@ -133,3 +133,29 @@ table.channels-table > tbody > tr > th {
 .setup-guide h2, .integration-settings h2 {
     margin: 0 0 1em 0;
 }
+
+.ai-step {
+    margin: 2em 0;
+}
+
+.ai-step .step-no {
+    display: block;
+    float: left;
+    font-size: 24px;
+    width: 48px;
+    heigth: 48px;
+    background: #7ec1ea;
+    border-radius: 32px;
+    text-align: center;
+    line-height: 48px;
+    margin-right: 32px;
+    margin-bottom: 32px;
+    color: #fff;
+    font-weight: 300;
+}
+
+.ai-guide-screenshot {
+    border: ;
+    max-width: 100%;
+    border: 6px solid #EEE;
+}

templates/integrations/add_slack.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% load compress humanize staticfiles hc_extras %}
 
-{% block title %}Notification Channels - healthchecks.io{% endblock %}
+{% block title %}Add Slack - healthchecks.io{% endblock %}
 
 
 {% block content %}
@@ -9,7 +9,48 @@
 <div class="col-sm-12">
     <h1>Slack</h1>
 
-    <p>A messaging app for teams.</p>
+    <p>If your team uses <a href="http://slack.com/">Slack</a>, you can set
+    up healthchecks.io to post status updates directly to an appropriate
+    Slack channel.</p>
+
+    <h2>Setup Guide</h2>
+    <div class="row ai-step">
+        <div class="col-sm-6">
+            <span class="step-no">1</span>
+            Log into your Slack account and
+            pick an appropriate Slack channel. From the dropdown next to
+            channel's name, pick <strong>Add a service integration...</strong>
+        </div>
+        <div class="col-sm-6">
+            <img
+                class="ai-guide-screenshot"
+                src="{% static 'img/integrations/setup_slack_1.png' %}">
+        </div>
+    </div>
+    <div class="row ai-step">
+        <div class="col-sm-6">
+            <span class="step-no">2</span>
+            From the list of available integrations, select
+            <strong>Incoming WebHooks</strong>, and click on
+            <strong>Add Incoming WebHooks Integration</strong>.
+        </div>
+    </div>
+
+    <div class="row ai-step">
+        <div class="col-sm-6">
+            <span class="step-no">3</span>
+            <p>Copy the displayed <strong>WebHook URL</strong> and paste it down below.</p>
+            <p>Save integration, and it's done!</p>
+        </div>
+        <div class="col-sm-6">
+            <img
+                class="ai-guide-screenshot"
+                src="{% static 'img/integrations/setup_slack_2.png' %}">
+        </div>
+    </div>
+
+
+
 
     <h2>Integration Settings</h2>
 

templates/integrations/add_webhook.html

@@ -1,15 +1,17 @@
 {% extends "base.html" %}
 {% load compress humanize staticfiles hc_extras %}
 
-{% block title %}Notification Channels - healthchecks.io{% endblock %}
+{% block title %}Add WebHook - healthchecks.io{% endblock %}
 
 
 {% block content %}
 <div class="row">
 <div class="col-sm-12">
-    <h1>Webhook</h1>
+    <h1>WebHook</h1>
 
-    <p>Receive a HTTP callback when a check goes down.</p>
+    <p>WebHooks are a simple way to notify an external system when a check
+    goes down. healthcheks.io will run a normal HTTP GET call to your
+    specified URL.</p>
 
     <h2>Integration Settings</h2>