diff --git a/static/css/channels.css b/static/css/channels.css index 88d71db7..ec5806e4 100644 --- a/static/css/channels.css +++ b/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; +} \ No newline at end of file diff --git a/static/img/integrations/setup_slack_1.png b/static/img/integrations/setup_slack_1.png new file mode 100644 index 00000000..c37d625d Binary files /dev/null and b/static/img/integrations/setup_slack_1.png differ diff --git a/static/img/integrations/setup_slack_2.png b/static/img/integrations/setup_slack_2.png new file mode 100644 index 00000000..230b8d05 Binary files /dev/null and b/static/img/integrations/setup_slack_2.png differ diff --git a/templates/integrations/add_slack.html b/templates/integrations/add_slack.html index 41950cb2..c21d1348 100644 --- a/templates/integrations/add_slack.html +++ b/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 @@

Slack

-

A messaging app for teams.

+

If your team uses Slack, you can set + up healthchecks.io to post status updates directly to an appropriate + Slack channel.

+ +

Setup Guide

+
+
+ 1 + Log into your Slack account and + pick an appropriate Slack channel. From the dropdown next to + channel's name, pick Add a service integration... +
+
+ +
+
+
+
+ 2 + From the list of available integrations, select + Incoming WebHooks, and click on + Add Incoming WebHooks Integration. +
+
+ +
+
+ 3 +

Copy the displayed WebHook URL and paste it down below.

+

Save integration, and it's done!

+
+
+ +
+
+ + +

Integration Settings

diff --git a/templates/integrations/add_webhook.html b/templates/integrations/add_webhook.html index 44215223..39f85055 100644 --- a/templates/integrations/add_webhook.html +++ b/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 %}
-

Webhook

+

WebHook

-

Receive a HTTP callback when a check goes down.

+

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.

Integration Settings