integrations: Add documentation for mention

templates/zerver/integrations.html

@@ -1296,6 +1296,49 @@
 
     </div>
 
+    <div id="mention" class="integration-instructions">
+
+      <p>First, create the stream you'd like to use for Mention Webhook notifications,
+      and subscribe all interested parties to this stream. The integration will
+      use the default stream <code>mention</code> if no stream is supplied in
+      the hook; you still need to create the stream even if you are using this
+      default.</p>
+
+      <p>Next, go to your Mention feed and click on your profile in the top right corner,
+      click on <b>Settings</b> in the drop down menu:</p>
+      <p><img src="/static/images/integrations/mention/001.png" /></p>
+
+      <p>From there, select <b>Integrations</b>:</p>
+      <p><img src="/static/images/integrations/mention/002.png" /></p>
+
+      <p>Select the <b>Zapier</b> integration, and click <b>Explore Mention on Zapier!</b>:</p>
+      <p><img src="/static/images/integrations/mention/003.png" /></p>
+
+      <p>Search for "webhooks" in the search bar, and click on <b>Webhooks by Zapier</b>.<br />
+      Scroll down and look for <b>Add Webhooks posts for new Mentions</b> and click on
+      <b>Use this Zap</b>:</p>
+      <p><img src="/static/images/integrations/mention/004.png" /></p>
+
+      <p>Select your Mention account Id and the alert that should trigger mentions
+      from the respective drop down menus, and click <b>Continue</b></p>
+
+      <p>Select <b>POST</b> on the page that says <b>Webhooks by Zapier Action</b>, and click
+       <b>Continue</b>.</p>
+
+      <p>In the <b>URL</b> field, enter a URL constructed like this:</p>
+
+      <p><code>{{ external_api_uri_subdomain }}/v1/external/mention?api_key=abcdefgh&amp;stream=mention</code></p>
+
+      <p>where <code>abcdefgh</code> should be replaced with the API key of your Zulip
+        bot. Select JSON for <b>Payload Type</b> and click <b>Continue</b>:</p>
+
+      <p><b>Congratulations! You're done!</b><br />
+      Your messages will look like this:</p>
+
+      <p><img src="/static/images/integrations/mention/005.png" /></p>
+
+    </div>
+
     <div id="mercurial" class="integration-instructions">
 
       <p>Get Zulip notifications when you <code>hg push</code>!</p>