You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

125 lines
4.3 KiB

{% 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 chat or user.">
{% 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-3.6.0.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/bootstrap-select.min.js' %}"></script>
{% endcompress %}
{% endblock %}