sms.at powered by
dtms Mainz

Online SMS How-To: Opt-in auf Website



websms bietet Ihnen vorgefertigte Opt-in-Formulare, die Sie auf Ihrer Unternehmenswebsite einbinden können, um so Ihren Kunden eine Anmeldung zu SMS-Services zu ermöglichen. Dabei wird mittels eines PIN-Codes automatisch die Handynummer verifiziert, um so Missbrauch zu verhindern. Lesen Sie hier, wie Sie ein Opt-in-Formular in Ihre Website integrieren und dieses optisch anpassen können.




Nehmen wir an, Sie haben eine Website, auf welcher Sie jeweils ein An- und ein Abmeldeformular zu Ihren SMS-Services anbieten möchten.




Opt-in-Code generieren


In Online SMS steht Ihnen unter Einstellungen > Opt-in ein Bereich zur Verfügung, in dem Sie HTML-Code für Opt-in Formulare entsprechend Ihrer Konfiguration generieren können.


Wählen Sie zunächst, welche Gruppen im Opt-in-Formular als Service angeboten werden sollen. Hierzu haben Sie drei Möglichleiten:


  • Wählen Sie nur eine Gruppe, so gibt es im Formular keine Auswahl. Alle Anmeldungen passieren dann automatisch genau für diese eine Gruppe.
  • Wählen Sie mehrere Gruppen, so erscheinen diese in einer Auswahlbox im Formular. Der Benutzer kann dann wählen, zu welchem Service er sich anmelden möchte.
  • Wählen Sie keine Gruppe, dann stehen sämtliche Gruppen im Formular zur Auswahl.

Wenn Sie die Gruppen-Konfiguration entsprechend Ihren Anforderungen durchgeführt haben, können Sie darunter einen Formular-Typ wählen, der für Sie in Frage kommt. Die einzelnen Formulartypen unterscheiden sich lediglich in der Menge an Daten, die von Benutzern abgefragt werden. Folgende Typen stehen zur Auswahl:


  • Basic-Version
  • Business-Version
  • Extended-Version

Bei jedem Formular-Typ lässt sich der HTML-Code anzeigen, den Sie für die Integration in Ihre Website benötigen.



Opt-in-Code einfügen


Nun müssen Sie den HTML-Code auf Ihrer Website an entsprechender Stelle einbinden.


Die oben abgebildete Demo-Seite besteht aus folgendem Quellcode:


 <!DOCTYPE html>
<html>
<head>
  <title>websms Opt-in Demo</title>
  <link rel="stylesheet" type="text/css" href="demo.css">
</head>

<body>
  <h1>Demonstration des websms Opt-in Formulars</h1>

  <p>Diese Demo-Seite zeigt, wie Sie das websms Opt-in-Formular in Ihre Website integrieren können.</p>

  <h2>Zum SMS-Service anmelden (Opt-in)</h2>
  
  << hier soll das Anmeldeformular hin >>

  <h2>Vom SMS-Service abmelden (Opt-out)</h2>
  
  << hier soll das Abmeldeformular hin >>
  
</body>
</html>

Das dazugehörige CSS-File ist auch recht simpel:


  body {
    background-color: #eeeeee;
    }
  iframe {
    border: 0;
  }

Wenn Sie nun jeweils den HTML-Codes für die An- bzw. Abmeldung an die entsprechenden Stellen kopieren, sieht der Quellcode so aus:


 <!DOCTYPE html>
<html>
<head>
  <title>websms Opt-in Demo</title>
  <link rel="stylesheet" type="text/css" href="demo.css">
</head>

<body>
  <h1>Demonstration des websms Opt-in-Formulars</h1>

  <p>Diese Demo-Seite zeigt, wie Sie das websms Opt-in-Formular in Ihre Website integrieren können.</p>

  <h2>Zum SMS-Service anmelden (Opt-in)</h2>
  
  <!-- websms Opt-in START-->
  <iframe src="https://apiv1.websms.com/opt_in/plugin.jsp?YXN3KUlBTZ9wBQHDzI1bmuOrbinxDB0uFpMShhhWpWgWmm15jnBYa%2Fwxz8cl15WG2QlSzLDWd5sIBR%2BdneAiC%2BfSVLTg7gCRUINuWlZU%2BoNHq24p8QwdLhdppiRIANpV7%2FQyREUcNPjDnTrE03JNTXvz8mdCTYmOC3lt7Pv4%2BBYEDJsUnysylXh2trzlP1aXIn6tuKfEMHS4XILwvUmnBEBQsDCaFYZ%2Fq9XhJXWwnlsNUVbFL3RGMsLbvhU4DEVgT1XhJXWwnlsNU35RxHWS%2FG0HkwgALoxlI%2F"></iframe> 
  <!-- websms Opt-in END-->

  <h2>Vom SMS-Service abmelden (Opt-out)</h2>
  
  <!-- websms Opt-out START-->
  <iframe src="https://apiv1.websms.com/opt_in/plugin.jsp?XN3KUlBTZ9wBQHYzI1bmuOrbinxDB0uFpMShhhWpWgWnn15jnBYa%2Fwxz/cl15WG2QlSzLDWd5sIBR%2BdneAiC%2BfSVLTg7gCRUINuWlZU%2BoNHq24p8QwdLhdppiRANpV7%2FQyREUcNPjDnTrE03JNTXvz8mdCTYmOC3lt7Pv4%2BBYEDJsUnysylXh504WP7e0YTD6FD6jJUJj93jorz7wq3nrDmXR%2FIYeMqO9oG3JNTQIfRpDXznzCTpp9luS79CR70i3encqlNYIh4dWkd%2FR%2FBXZStGIaW8jgVu"></iframe> 
  <!-- websms Opt-out END-->
  
</body>
</html>

Auf der Website wirkt sich das wie folgt aus:




Formular Stylen


Nun passen die Formulare natürlich optisch noch nicht zum Rest der Website. Aber auch hierfür bietet websms eine Lösung: Im Opt-in-Bereich gibt es einen weiteren Tab "Style CSS". Hier können Sie für Ihre Opt-in-Formulare Styles hinterlegen. Entweder Sie binden gleich das CSS-File der Website selbst ein oder Sie vergeben eigene CSS-Deklarationen.



Nachdem Sie die Styles angepasst haben, werden diese sofort in den Formularen übernommen, sodass sich diese nun optisch in die Website einfügen.