YouTube Video in Begrüßungs-Popup

Jeder Anwender, der sich zum ersten Mal in Seafiles Webinterface Seahub einloggt, wird von einem Pop-Up mit einer kurzen Begrüßung willkommen geheissen. Dies ist grundsätzlich eine nette Geste, andererseits auch eine Vergeudung der vollen Aufmerksamkeit der Benutzer! Warum nicht an dieser Stelle dem Neunutzer anstatt eines freundlichen “Hallos!” ein paar essentielle Informationen über Seafiles Bedienung und Anwendungsfälle oder Datenschutzaspekte präsentieren? Gerade ein prägnantes Video bietet sich dafür an? In diesem Beitrag zeigen wir, wie einfach die Einbindung eines YouTube Videos ist.

Maximale Aufmerksamkeit für Ihr Begrüßungs-Video

Seafile Welcome Popup ohne Video

Das Bild zeigt das Begrüßungs-Popup von Seafile, welches standardmäßig beim ersten Login eingeblendet wird. Dieses gilt es anzupassen, um eine individuelle und – vor allem – relevantere Message zu übermitteln. Wenn Seafile z.B. gerade neu in Ihrem Unternehmen eingeführt wurde, lässt sich an dieser Stelle der geplante Einsatzzweck erläutern. Alternativ kann man eine Einführung in die Weboberfläche und die Möglichkeiten von Seafile geben. Die Möglichkeiten sind vielfältig und unbestimmt. Sicher ist aber, dass die Interaktionsrate bei einem gut gemachten Video um ein Vielfaches größer ist als bei einem einfachen Textblock.

Seafile Begrüßungs-Popup mit YouTube Video

So sieht es zum Beispiel aus, wenn man das YouTube Video Was ist Seafile in das Begrüßungs-Popup von Seafile einbaut. Ein einfaches iframe-Element genügt, um das Popup auf einen Schlag ansprechender zu machen. Finden Sie nicht?

Einrichtung und Inbetriebnahme

Wir erklären anhand des oben verwendeten Beispielvideos die Schritte zur Einbindung des Videos. Vier Schritte sind es konkret. Bei der Erklärung gehen wir davon aus, dass Ihr Seafile Server eingerichtet ist und Sie per SSH Zugriff auf ihn Zugriff haben.

Schritt 1: Identifikation der Template Datei

Seafile arbeitet mit einem HTML-Framework, welches es dem Administrator erlaubt, beliebige Anpassungen am HTML-Code vorzunehmen. Damit vorgenommene Änderungen an den Template Dateien nicht bei einem Update des Seafile Serves überschrieben werden, müssen diese in einem separaten Ordner gespeichert und “versymlinkt” werden. Die Details dieses Vorgehen sollen nicht Teil dieses Artikels sein. Sie werden aber detailliert im englischen Seafile Manual beschrieben.

Wir starten damit, dass wir die relevante HTML-Datei in das Template Verzeichnis kopieren. Dort bearbeiten wir Sie dann. In unsrem Beispiel ist Seafile im Verzeichnis /home/seafile/ installiert:

$ cd /home/seafile/seafile-server-latest/seahub/seahub/templates/
$ cp ./base_for_backbone.html /home/seafile/seahub-data/custom/templates

Schritt 2: Ermittlung des YouTube Shortcodes

Die URLs von YouTube Videos folgen einer einfachen Struktur: Auf das führende www.youtube.com/watch?v= folgt der sogenannte Shortcode. Der Shortcode ist eine elfstellige Zeichenfolge, die das Video eindeutig identifiziert. Das Beispielvideo hat die URL https://www.youtube.com/watch?v=jsSbhjO-2Sg und damit den Shortcode jsSbhjO-2Sg.

Finden Sie den Shortcode für das gewünschte Video heraus. Diesen benötigen wir im nächsten Abschnitt, um das Video per iframe im Begrüßungs-Popup einzufügen.

Schritt 3: Integration des Videos ins Template

Als Nächstes öffnen Sie die Template Datei mit dem Texteditor der Wahl und suchen nach dem folgenden Abschnitt:

<div id="guide-for-new" class="hide">
    <span class="icon-lightbulb fleft" aria-hidden="true"></span>
    <div class="txt">
        <h3 id="dialogTitle">{% blocktrans with site_name=site_name %}Welcome to {{site_name}}{% endblocktrans %}</h3>
        {% if user.permissions.can_add_repo %}
        <p>{% blocktrans with site_name=site_name %}{{site_name}} organizes files into libraries. Each library can be synced and shared separately. We have created a personal library for you. You can create more libraries later.{% endblocktrans %}</p>
        {% else %}
        <p>{% blocktrans with site_name=site_name %}{{site_name}} organizes files into libraries. Each library can be synced and shared separately. Howerver, since you are a guest user now, you can not create libraries.{% endblocktrans %}</p>
        {% endif %}
        <button class="simplemodal-close" style="margin:8px 0 0 0;">{% trans "Close" %}</button>
    </div>
</div>

Um das Video einzufügen, genügt es, nach dem h3-Tag ein iframe einzubauen. Für das Beispielvideo sieht der vollständige Abschnitt dann so aus (eingefügter Teil in rot):

<div id="guide-for-new" class="hide">
    <span class="icon-lightbulb fleft" aria-hidden="true"></span>
    <div class="txt">
        <h3 id="dialogTitle">{% blocktrans with site_name=site_name %}Welcome to {{site_name}}{% endblocktrans %}</h3>
        <iframe src="https://www.youtube.com/embed/jsSbhjO-2Sg?rel=0" width="640" height="360" frameborder="0" allowfullscreen></iframe>
        {% if user.permissions.can_add_repo %}
        <p>{% blocktrans with site_name=site_name %}{{site_name}} organizes files into libraries. Each library can be synced and shared separately. We have created a personal library for you. You can create more libraries later.{% endblocktrans %}</p>
        {% else %}
        <p>{% blocktrans with site_name=site_name %}{{site_name}} organizes files into libraries. Each library can be synced and shared separately. Howerver, since you are a guest user now, you can not create libraries.{% endblocktrans %}</p>
        {% endif %}
        <button class="simplemodal-close" style="margin:8px 0 0 0;">{% trans "Close" %}</button>
    </div>
</div>

Schritt 4: Neustart von Seahub

Damit dieses Video nun auch jedem neuen Seafile Benutzer gezeigt wird, muss das Webinterface Seahub neu gestartet werden. Damit es keine Probleme beim Laden der Template Datei gibt, achten Sie darauf, dass die Datei dem User gehört, der den Seafile Server und Seahub startet.

Individuelle Videos für Ihr Seafile System

Sie haben eine Video Idee und brauchen einen Partner bei der Umsetzung? Gerne erstellt Ihnen unser deutscher Vertriebspartner datamate individuelle Schulungsvideos zu unterschiedlichen Seafile Themen. Sprechen Sie das datamate Team einfach an.