{% extends "base.html" %}
|
|
{% load compress humanize static hc_extras %}
|
|
|
|
{% block title %}Telegram Integration for {% site_name %}{% endblock %}
|
|
|
|
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<h1>Telegram</h1>
|
|
|
|
{% if chat_id %}
|
|
<div class="jumbotron">
|
|
<p>
|
|
When a check goes <strong>up</strong> or <strong>down</strong>,
|
|
{% site_name %} will send notifications to
|
|
{% if chat_type == "private" %}
|
|
a Telegram user
|
|
{% else %}
|
|
a Telegram chat
|
|
{% endif %}
|
|
named <strong>{{ chat_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-8">
|
|
<select name="project" class="selectpicker">
|
|
{% 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 chat or user.</p>
|
|
|
|
<h2>Setup Guide</h2>
|
|
<div class="row ai-step">
|
|
<div class="col-sm-6">
|
|
<span class="step-no"></span>
|
|
<p>
|
|
From your Telegram client, invite
|
|
<strong><a href="https://t.me/{{ bot_name }}">{{ bot_name }}</a></strong>
|
|
to a group. It will get added as a member with no access to group
|
|
messages.
|
|
</p>
|
|
<p>
|
|
Alternatively, if you want notifications sent to yourself
|
|
directly, start a conversation with
|
|
<strong>{{ bot_name }}</strong>.
|
|
</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>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 %}
|
|
|
|
{% block scripts %}
|
|
{% compress js %}
|
|
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
|
|
<script src="{% static 'js/bootstrap.min.js' %}"></script>
|
|
<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
|
|
{% endcompress %}
|
|
{% endblock %}
|