Achtung: Diese Anleitung wird durch eine neuere, einfachere Vorgehensweise ersetzt die, Sie hier finden: Turnierbaum in Webseite einbinden - Vereinfachte Version

Wie kann ich den Turnierbaum EINES Matchplays in die Webseite integrieren?

Zunächst einmal muss man festhalten, dass jedes einzelne Matchplay in die Webseite separat eingebunden werden muss. Das macht deshalb Sinn, weil nicht jedes Matchplay die notwendige Teilnehmerzahl hat, um auf den Seiten des Clubs präsent zu sein. Der Organisator hat so die Möglichkeit zu entscheiden, ob und und wo der Baum angezeigt wird. Wichtig: Aktuell kann man EIN MATCHPLAY pro Seite darstellen bzw. man kann nicht zwei Turnierbäume auf einer Seite darstellen. 


Was wird dazu benötigt?

  • Der API Code für das Matchplay (Kann im Adminbereich generiert werden). 
  • Die jeweilige MatchplayID zur Darstellung eines bestimmten Matchplays. 
  • "Tenant" in der Vorlage ersetzen. Der Tenant ergibt sich aus der persönlichen Adresse https://DeinClub.matchplaytime.com. "DeinClub" wäre hier der Tenant.
  • Das unten stehende Script als Vorlage (wo man den Test Code durch den eigenen API Code ersetzt)
  • Zur individuellen Anpassung an die Webseite noch das CSS File zur Einbindung in die Webseite. 
  • HTML Kenntnisse und für die individuelle Anpassung auch CSS Kenntnisse (Wie Styles eingebunden werden wird hier nicht erklärt weil es einem Webmaster vorbehalten sein sollte)


Hört sich nach einer Menge Aufwand an? Keine Sorge, nach einmal einbinden mit unseren Vorlagen und Anleitungen eine Sache von wenigen Minuten. Beide Vorlagen (HTML und CSS sind übrigens im Anhang downloadfähig)



1. Schritt: API Code generieren

Der API Code ist die Grundvoraussetzung zur Einbindung in die Webseite. Ohne diesen Code lässt sich auch keine der ohnehin verfügbaren IDs nutzen. 






2. Schritt: Matchplay ID finden und kopieren

Jedes Matchplay hat in der URL eine ID enthalten. Einfach auf MatchplayTime in das gewünschte Matchplay gehen und in der Adresszeile die ID rauskopieren:



Danach diese ID im dritten Schritt unten einfach in die Vorlage kopieren. Siehe oben im Bild die Definition. Die Vorlage für das Script zur Einbindung hängt übrigens an dieser Anleitung an. Jetzt noch den Tenant übernehmen und ebenfalls im Formular ersetzen. FERTIG!



3. Schritt: API Code und Matchplay ID in die Vorlage kopieren sowie einbinden

Bitte beachten Sie die im Beispiel HTML unten die Kommentare die hinter ' // ' bzw. innerhalb von '<!--..-->' stehen. Diese können theoretisch nach der Nutzung gelöscht werden und dienen hier ausschliesslich der Erklärung. Das relevante Script zur Einbindung von gilt von <script> bis </script>. 



<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>

<!-- AB HIER beginnt das Script-->
<script type="text/javascript" src="https://connect.matchplaytime.com/mpt-plugins.js"></script>
<script type="text/javascript">
    (function () {
        const mpt = document.querySelector('mpt-playoff');
        mpt.init = {
            tenant: 'yoomani', // Bitte mit Ihrem Tenant ersetzen
            apiKey: '$2a$10$0qlsZhiQ2r.....yIr.8.3r/R.TA9F7h0k9NrSRobK', // Bitte mit Ihrer API ersetzen
        };
    }());
</script><!-- Script Ende -->
</html>


Nachdem man das oben aufgeführte Script mit dem eigenen API Code und Matchplay ID aktualisiert hat, muss man es in die HTML Seite übernehmen und einfügen. ACHTUNG: Je nach Basis für die Webseite kann es auch sein, dass die Einbindung über <head></head> nicht reibungslos funktioniert. Dann ist die Einbindung über <footer></footer> eine Alternative die funktioniert oder einfach NACH dem </body> Tag.



Danach kann an jeder beliebigen Stelle der Webseite der Turnierbaum angezeigt werden. Einfach durch Eingabe dieses Codes (class-ID) ; und zwar INNERHALB des Body-Tag <body></body> mit der richtigen Matchplay-ID


<mpt-playoff matchplayId="f1fe5d61-5c7f-4b...........-c23bdf441a5f"></mpt-playoff>




Linkvorschläge: