Embed and support with Zammad

[DanielLeyUX]

Guten Morgen Herr Ley,

für unsere kleine Besprechung gleich anbei noch einen Link zur Einbindung vom Zammad Ticketsystem.
Hier müsste allgemein die Optik der Zammad Oberfläche via CSS etwas angepasst werden, zumindest farblich abgestimmt mit den Farben die wir für die Webseite wählen werden.

Bei Rückfragen hierzu brauchen wir aber Herrn Jan Hubert.
https://admin-docs.zammad.org/de/latest/channels/form.html

[julrich]

@DanielLeyUX wahrscheinlich wirklich noch mal besprechens-würdig. Direkte Doku zur Design-Anpassung scheint es nicht zu geben. Die passiert aber offensichtlich über CSS. Man kann auf jeden Fall das Default-CSS deaktivieren, um dann sein eigenes zu laden.

Ob es jetzt sinnvoller ist nur a) ein wenig "Fixing" im Default-CSS zu betreiben, oder b) das abzuschalten und komplett durch eigenes zu ersetzen, muss man wahrscheinlich mal abwägen. Vom Anspruch kommt natürlich bei b) etwas hochwertigeres bei raus.

[DanielLeyUX]

ja, das schneide ich morgen im Termin an

[julrich]

Potentiell zu bedenken: DSGVO / Consent und das Datenhandling (Datenfluss + Cookies) von Zammad.

[julrich]

Snippet to add:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div id="zammad-feedback-form">form will be placed in here</div>
<script id="zammad_form_script" src="https://helpdesk.drhubert.de/assets/form/form.js"></script>
<script>
$(function() {
  $('#zammad-feedback-form').ZammadForm({
    messageTitle: 'Feedback-Formular',
    messageSubmit: 'Übermitteln',
    messageThankYou: 'Vielen Dank für Ihre Anfrage (#%s). Wir melden uns umgehend.',
    noCSS: true
  });
});
</script>

[lmestel]

Aus Gründen müssen wir das Snippet etwas anpassen:

<script>
  function injectScript(src, id) {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = src;
      script.id = id;
      script.addEventListener("load", resolve);
      script.addEventListener("error", (e) => reject(e.error));
      document.head.appendChild(script);
    });
  }
  injectScript("https://code.jquery.com/jquery-3.6.0.min.js")
    .then(() => injectScript("https://helpdesk.drhubert.de/assets/form/form.js", "zammad_form_script"))
    .then(() => {
      $("#zammad-feedback-form").ZammadForm({
        messageTitle: "Feedback-Formular",
        messageSubmit: "Übermitteln",
        messageThankYou:
          "Vielen Dank für Ihre Anfrage (#%s). Wir melden uns umgehend.",
        noCSS: false,
      });
    });
</script>
<script id=></script>
<div id="zammad-feedback-form">form will be placed in here</div>

[julrich]

Konfiguration und Styling sind abgeschlossen, warten auf Kundenfeedback bevor wir hier zu machen.