integrations: Add documentation for heroku

templates/zerver/integrations.html

@@ -956,6 +956,58 @@
         <img class="screenshot" src="/static/images/integrations/helloworld/001.png" />
     </div>
 
+    <div id="heroku" class="integration-instructions">
+      <p>
+        Receive notifications in Zulip whenever a new version of an app is pushed to Heroku
+        using the Zulip Heroku plugin!
+      </p>
+
+      <p>
+        First, create the stream you'd like to use for Heroku notifications, and
+        subscribe all interested parties to this stream. We recommend the
+        name <code>heroku</code>.
+      </p>
+
+      <p>Next, on your {{ settings_html|safe }}, create a Heroku bot.</p>
+
+      <p>Then, log into your account on <a href="http://heroku.com">heroku.com</a>, and:</p>
+
+      <ol>
+        <li>
+          <p>
+            Visit the page for the project for which you'd like to generate
+            Zulip notifications. Click the "Resources" tab, and add the "Deploy Hooks" addon.
+            Choose the "HTTP Post Hook" plan, and click "Provision".
+          </p>
+
+          <img class="screenshot" src="/static/images/integrations/heroku/001.png" />
+        </li>
+        <li>
+          <p>
+            Click on the "Deploy Hooks" add-on that you just added.
+            You should be redirected to a page that looks like this:
+          </p>
+
+          <p><img class="screenshot" style="border:1px solid #000000" src="/static/images/integrations/heroku/002.png" /></p>
+
+          <p>
+            Enter the following webhook URI, replacing the bot API key
+            and Zulip stream with the appropriate information.
+          </p>
+
+          <p><code>{{ external_uri_scheme }}{{ external_api_path_subdomain }}/v1/external/heroku?api_key=<font color="#00A26F">test_api_key</font>&amp;stream=<font color="#00A26F">heroku</font></code></p>
+        </li>
+      </ol>
+
+      <p>
+        <b>Congratulations! You're done!</b><br />
+        When you deploy to Heroku, the team can see these updates in real time in Zulip:
+      </p>
+
+      <img class="screenshot" src="/static/images/integrations/heroku/003.png" />
+    </div>
+
+
     <div id="hubot" class="integration-instructions">