Elektronische signatur

Deutsch Diskussion Technische Fragen & Antworten
1

Hi,

ich brauche in meinem Kontaktformular, eine Box in der meine Kunden mit der Maus unterschreiben können. Gibt es ein App die diese Funktion besitz?

Ich kann keine finden.

Danke schon mal

2

Hey @Samuel48

Du brauchst also in deinem Kontaktformular, eine Box in der deine Kunden mit der Maus elektronisch unterschreiben können. Darf ich fragen was der Use-Case ist?

Mit der SignPanda App können deine Kunden Dokumente direkt im Shopify-Shop unterschreiben falls das hilft (wichtig: bitte Bewertungen lesen). Sobald die Unterschrift bestätigt ist, erhalten sowohl du als auch der Kunde eine rechtsverbindliche Unterschrift direkt im Posteingang - und das von jedem Gerät aus, egal ob Laptop, PC oder Handy. Was die App kann:

  • Unterschreibe und versende Dokumente direkt in deinem Shopify-Shop, ohne viel Aufwand.
  • Bindet die eSignatures-Funktion automatisch in deine Produktseite ein.
  • Kunden können von jedem Gerät aus unterschreiben, auch von einem Laptop, PC oder Mobiltelefon.
  • Unterschreibe jederzeit und überall online, ohne dass du einen Scanner brauchst.

Wenn du es selber auf deiner Kontaktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Du musst zuerst ein HTML-Canvas-Element in deinem Kontaktformular Liquid einfügen, in dem die Kunden ihre Unterschrift zeichnen können wie das folgende Beispiel:

Dann den notwendigen JavaScript-Code hinzufügen, um die Zeichenfunktionen für das Canvas-Element zu aktivieren:

var canvas = document.getElementById('signature-pad');
var context = canvas.getContext('2d');
var isDrawing = false;

canvas.addEventListener('mousedown', function() {
  isDrawing = true;
  context.beginPath();
});

canvas.addEventListener('mousemove', function(event) {
  if (isDrawing === true) {
    drawLine(context, event.offsetX, event.offsetY);
  }
});

canvas.addEventListener('mouseup', function() {
  isDrawing = false;
  context.closePath();
});

document.getElementById('clear').addEventListener('click', function() {
  context.clearRect(0, 0, canvas.width, canvas.height);
});

function drawLine(context, x, y) {
  context.lineWidth = 2;
  context.lineTo(x, y);
  context.stroke();
}

Du kannst auch etwas CSS hinzufügen, um das Aussehen des Canvas-Elements anzupassen:

#signature-pad {
  border: 1px solid #000;
  cursor: crosshair;
}

Man muss die Unterschrift auch irgendwie speichern oder übertragen. Eine Möglichkeit wäre, die Zeichnung in ein Bild umzuwandeln und als Daten-URL an deinen Server zu senden. Hier ist ein Beispiel, wie du das machen könntest:

function saveSignature() {
  var dataURL = canvas.toDataURL();
  // Hier kannst du den dataURL an deinen Server senden oder wie gewünscht verwenden
}

Dies ist eine sehr grundlegende Implementierung und möglicherweise musst du sie an deine spezifischen Anforderungen anpassen.

Wie gesagt, gerne kann ich einen Experten empfehlen! :wink:

1 Like
3

Vielen Dank!

Wenn du mir einen experten empfehlen kannst, dann sehr gerne.

4

Hi @Samuel48 ,

Falls du Unterstützung bei der Implementierung von Gabes möchtest, kann ich die Shopify Experten empfehlen, die du hierfür einstellen kannst.

Die Shopify Expert Seite kann auf zwei Arten genutzt werden. Entweder veröffentlichst du dort einen Job und erhältst darauf Kostenvoranschläge oder du suchst per Kriterien nach einem Experten und bittest so um einen Kostenvoranschlag: