{% extends "pretixcontrol/event/settings_base.html" %} {% load i18n %} {% load static %} {% load bootstrap3 %} {% load eventurl %} {% load eventsignal %} {% block inside %}

{% trans "Widget" %}

{% blocktrans trimmed %} The pretix widget is a way to embed your ticket shop into your event website. This way, your visitors can buy their ticket right away without leaving your website. {% endblocktrans %}

{% if valid %}

{% blocktrans trimmed %} To embed the widget onto your website, simply copy the following code to the <head> section of your website: {% endblocktrans %}

<link rel="stylesheet" type="text/css" href="{% abseventurl request.event "presale:event.widget.css" %}" crossorigin>
<script type="text/javascript" src="{{ urlprefix }}{% url "presale:widget.js" lang=form.cleaned_data.language %}" async crossorigin></script>

{% blocktrans trimmed %} Then, copy the following code to the place of your website where you want the widget to show up: {% endblocktrans %}

{% if form.cleaned_data.subevent %} {% abseventurl request.event "presale:event.index" subevent=form.cleaned_data.subevent.pk as indexurl %} {% else %} {% abseventurl request.event "presale:event.index" as indexurl %} {% endif %} {% if form.cleaned_data.compatibility_mode %}
<div class="pretix-widget-compat" event="{% abseventurl request.event "presale:event.index" %}"{% if form.cleaned_data.subevent %} subevent="{{ form.cleaned_data.subevent.pk }}"{% endif %}{% if form.cleaned_data.voucher %} voucher="{{ form.cleaned_data.voucher }}"{% endif %} single-item-select="button"></div>
<noscript>
   <div class="pretix-widget">
        <div class="pretix-widget-info-message">
                {% blocktrans trimmed with a_attr='target="_blank" rel="noopener" href="'|add:indexurl|add:'"'|safe %}
                    JavaScript is disabled in your browser. To access our ticket shop without JavaScript,
                    please <a {{ a_attr }}>click here</a>.
                {% endblocktrans %}
                </div>
    </div>
</noscript>
{% else %}
<pretix-widget event="{% abseventurl request.event "presale:event.index" %}"{% if form.cleaned_data.subevent %} subevent="{{ form.cleaned_data.subevent.pk }}"{% endif %}{% if form.cleaned_data.voucher %} voucher="{{ form.cleaned_data.voucher }}"{% endif %} single-item-select="button"></pretix-widget>
<noscript>
   <div class="pretix-widget">
        <div class="pretix-widget-info-message">
            {% blocktrans trimmed with a_attr='target="_blank" rel="noopener" href="'|add:indexurl|add:'"'|safe %}
                JavaScript is disabled in your browser. To access our ticket shop without JavaScript,
                please <a {{ a_attr }}>click here</a>.
            {% endblocktrans %}
        </div>
    </div>
</noscript>
{% endif %}

{% trans "Read our documentation for more information" %}

{% else %}

{% blocktrans trimmed %} Using this form, you can generate a code to copy and paste to your website source. {% endblocktrans %}

{% csrf_token %} {% bootstrap_form form layout="control" %}
{% endif %} {% eventsignal request.event "pretix.control.signals.event_settings_widget" request=request %} {% endblock %}