healthchecks_healthchecks/templates/integrations/add_telegram.html

{% extends "base.html" %}
{% load compress humanize static hc_extras %}

{% block title %}Telegram Integration for {{ site_name }}{% endblock %}

{% block description %}
    <meta name="description" content="Use {{ site_name }} with Telegram: configure {{ site_name }} to post status updates to a Telegram user, group or channel.">
{% endblock %}

{% block content %}
<div class="row">
<div class="col-sm-12">
    <h1>Telegram</h1>

    {% if recipient.id %}
    <div class="jumbotron">
        <p>
            When a check goes <strong>up</strong> or <strong>down</strong>,
            {{ site_name }} will send notifications to
            {% if recipient.type == "private" %}
                a Telegram user
            {% elif recipient.type == "channel" %}
                a Telegram channel
            {% else %}
                a Telegram group
            {% endif %}
            named <strong>{{ recipient.name }}</strong>.
        </p>
    </div>

    <h2>Integration Settings</h2>
    <form id="add-telegram" method="post" class="form-horizontal">
        {% csrf_token %}
        <div class="form-group">
            <label class="col-sm-3 control-label">Project</label>
            <div class="col-sm-6 col-lg-4">
                <select name="project" class="form-control">
                    {% for project in projects %}
                    <option value="{{ project.code }}">{{ project }}</option>
                    {% endfor %}
                </select>
           </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-8">
                <button type="submit" class="btn btn-default">
                    <img class="ai-icon" src="{% static 'img/integrations/telegram.png' %}" alt="Telegram" />
                    Connect Telegram
                </button>
            </div>
        </div>
    </form>

    {% else %}
    <p>If your team uses <a href="https://telegram.org/">Telegram</a>,
    you can set up {{ site_name }} to post status updates directly to an
    appropriate Telegram user, group or channel.</p>

    <h2>Setup Guide</h2>
    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no"></span>
            <p>
                <strong>Groups:</strong> If you want notifications sent to a group, start by inviting
                <a href="https://t.me/{{ bot_name }}">{{ bot_name }}</a>
                to the group. The bot will get added as a member with no access to
                group messages.
            </p>
            <p>
                <strong>Direct messages:</strong> If you want notifications sent to yourself directly,
                start a conversation with
                <a href="https://t.me/{{ bot_name }}">{{ bot_name }}</a>.
            </p>
            <p>
                <strong>Channels:</strong> If you want notifications sent to a Telegram channel,
                add <a href="https://t.me/{{ bot_name }}">{{ bot_name }}</a>
                to the channel's Administrators. Enable the "Post Messages" admin
                right, and disable all other admin rights.
            </p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/integrations/setup_telegram_1.png' %}">
        </div>
    </div>
    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no"></span>
            <p>Type <strong><code>/start</code></strong> command.
               If there are multiple bots in the group, type
               <strong><code>/start@{{ bot_name }}</code></strong> instead.
           </p>
           <p>If you want {{ site_name }} to post notifications to a <strong>specific
              group topic</strong>, send a <strong><code>/start@{{ bot_name }}</code></strong>
              command from that topic.
           </p>
            <p>The bot will respond with a confirmation link.</p>
        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/integrations/setup_telegram_2.png' %}">
        </div>    </div>

    <div class="row ai-step">
        <div class="col-sm-6">
            <span class="step-no"></span>
            <p>Click or tap on the confirmation link, and
            {{ site_name }} will open in a browser window asking you to
             confirm the new integration.</p>
            <p>Select the project you want the Telegram integration added to,
            click on "Connect Telegram", and it's done!</p>

        </div>
        <div class="col-sm-6">
            <img
                class="ai-guide-screenshot"
                alt="Screenshot"
                src="{% static 'img/integrations/setup_telegram_3.png' %}">
        </div>
    </div>
    {% endif %}
</div>
</div>
{% endblock %}