mirror of
https://github.com/lucaspalomodevelop/eventcally.git
synced 2026-03-13 00:07:22 +00:00
93 lines
6.5 KiB
HTML
93 lines
6.5 KiB
HTML
{% extends "layout.html" %}
|
|
{% set active_id = "widgets" %}
|
|
{% from "_macros.html" import render_pagination, render_event_date, render_field, render_field_with_errors, render_event_organizer %}
|
|
{%- block title -%}
|
|
{{ _('Widgets') }}
|
|
{%- endblock -%}
|
|
{% block content %}
|
|
|
|
<h1 class="mb-3">{{ _('Widgets') }}</h1>
|
|
<div class="btn-group mb-3">
|
|
<button type="button" id="toggle-settings-btn" class="btn btn-outline-secondary btn-sm" data-toggle="collapse" data-target="#settingsContainer" aria-expanded="false" aria-controls="settingsContainer"><i class="fa fa-cog"></i> {{ _('Settings') }}</button>
|
|
</div>
|
|
|
|
<div class="collapse pb-4" id="settingsContainer">
|
|
<h2 class="mt-0">{{ _('Settings') }}</h2>
|
|
<form action="" method="POST">
|
|
{{ form.hidden_tag() }}
|
|
|
|
{{ render_field_with_errors(form.widget_font) }}
|
|
{{ render_field_with_errors(form.widget_background_color) }}
|
|
{{ render_field_with_errors(form.widget_primary_color) }}
|
|
{{ render_field_with_errors(form.widget_link_color) }}
|
|
|
|
{{ render_field(form.submit) }}
|
|
</form>
|
|
</div>
|
|
|
|
<h2>Veranstaltungen als Widget einbinden</h2>
|
|
<p>Auf deiner Webseite kannst du per Widget ganz einfach die Veranstaltungen deiner Organisation einbinden.</p>
|
|
|
|
<div class="modal fade" id="embedWidgetModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Installation</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<nav>
|
|
<div class="nav nav-tabs" id="embedWidgetModalTab" role="tablist">
|
|
<a class="nav-item nav-link active" id="embedWidgetModalScriptTabLink" data-toggle="tab" href="#embedWidgetModalScriptTab" role="tab" aria-controls="embedWidgetModalScriptTab" aria-selected="true">Standard</a>
|
|
<a class="nav-item nav-link" id="embedWidgetModalIframeTabLink" data-toggle="tab" href="#embedWidgetModalIframeTab" role="tab" aria-controls="embedWidgetModalIframeTab" aria-selected="false">Alternative iFrame</a>
|
|
</div>
|
|
</nav>
|
|
<div class="tab-content" id="nav-tabContent">
|
|
<div class="tab-pane fade show active py-3" id="embedWidgetModalScriptTab" role="tabpanel" aria-labelledby="embedWidgetModalScriptTabLink">
|
|
<p>Kopiere den unten stehenden Code und füge ihn auf deiner Website ein.</p>
|
|
<p>Füge den folgenden Code im <code><head></code> der Seite ein.</p>
|
|
<textarea class="form-control text-monospace" style="font-size: 0.7rem;" disabled rows="6"><!-- Event calendar widget -->
|
|
<script>(function(w,d,s,o,f,js,fjs){w['EventCallyWidget']=o;w[o]=w[o]||function(){(w[o].q=w[o].q||[]).push(arguments)};js=d.createElement(s),fjs=d.getElementsByTagName(s)[0];js.id=o;js.src=f;js.async=1;fjs.parentNode.insertBefore(js,fjs);}(window,document,'script','eventcally','{{ url_for('static', filename='widget-loader.js', _external=True) }}'));</script>
|
|
<!-- End event calendar widget --></textarea>
|
|
<p class="mt-3">Füge den folgenden Code an der Stelle im <code><body></code> der Seite ein, wo das Widget dargestellt werden soll.</p>
|
|
<textarea class="form-control text-monospace" style="font-size: 0.7rem;" disabled rows="3"><div class="eventcally-widget" data-widget-short-name="{{ admin_unit.short_name }}" data-widget-width="100%" data-widget-height="400px" data-widget-resize="true" data-widget-google-tag-manager="false"></div></textarea>
|
|
<p class="mt-3">Mit den folgenden Attributen kann das Widget konfiguriert werden:</p>
|
|
<ul>
|
|
<li><var>data-widget-short-name</var>: Kurzname der Organisation</li>
|
|
<li><var>data-widget-width</var>: iFrame Breite (CSS)</li>
|
|
<li><var>data-widget-height</var>: iFrame Höhe (CSS)</li>
|
|
<li><var>data-widget-resize</var>: iFrame Größe automatisch anpassen</li>
|
|
<li><var>data-widget-google-tag-manager</var>: Events in window.dataLayer für Google Tag Manager schreiben.
|
|
<ul>
|
|
<li>Event <var>eventcallyWidget.pageView</var> mit Parameter <var>url</var></li>
|
|
<li>Event <var>eventcallyWidget.linkClick</var> mit Parameter <var>url</var></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tab-pane fade py-3" id="embedWidgetModalIframeTab" role="tabpanel" aria-labelledby="embedWidgetModalIframeTabLink">
|
|
<p>Alternativ zur Einbindung per Script kann das Widget direkt per iFrame eingebunden werden.</p>
|
|
<p>Kopiere den unten stehenden Code und füge ihn auf deiner Website ein. Füge den folgenden Code an der Stelle im <code><body></code> der Seite ein, wo das Widget dargestellt werden soll.</p>
|
|
<textarea class="form-control text-monospace" style="font-size: 0.7rem;" disabled><iframe src="{{ url_for('widget_event_dates', id=admin_unit.id, _external=True) }}"></iframe></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn-group mb-3">
|
|
<button type="button" class="btn btn-outline-info" data-toggle="modal" data-target="#embedWidgetModal"><i class="fa fa-wrench"></i> Installation</button>
|
|
<a class="btn btn-outline-info" href="{{ url_for('widget_event_dates', id=admin_unit.id) }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-external-link-alt"></i> Vorschau</a>
|
|
</div>
|
|
|
|
{% if admin_unit.suggestions_enabled %}
|
|
<h2>{{ _('Link, um Veranstaltungen vorzuschlagen') }}</h2>
|
|
<input class="form-control text-monospace" style="font-size: 0.7rem;" disabled value="{{ url_for('event_suggestion_create_for_admin_unit', id=admin_unit.id, _external=True) }}" />
|
|
<p><a class="btn btn-outline-info my-2" href="{{ url_for('event_suggestion_create_for_admin_unit', id=admin_unit.id, _external=True) }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-external-link-alt"></i> Vorschau</a></p>
|
|
{% endif %}
|
|
|
|
|
|
{% endblock %} |