CMSJuli 2019

Integration von Salesforce mit Scrivito

Da wir Scrivito weiterhin um Funktionen auf Unternehmensebene ausstatten, haben wir beschlossen, auch andere Unternehmensdienste zu integrieren.. Salesforce ist einer davon und bietet eine Fülle von Funktionen. Wir könnten jemanden Vollzeit einstellen, nur um Integrationen zu erstellen, die Ihnen die Leistungsfähigkeit und Flexibilität von Scrivito und Salesforce zeigen. Unsere Kunden haben viele individuelle Integrationen erstellt und nutzen die beiden Dienste mit all ihren Stärken gemeinsam. Salesforce bietet auch eine robuste API zur Nutzung der Dienste innerhalb Ihrer Scrivito-Anwendung, falls Sie weitere Optionen benötigen. Wir werden es hier jedoch einfach halten, da die Erfahrung gezeigt hat, dass alles, was wir bauen, angepasst wird. Ob Sie ein Vertriebs- oder Marketingmitarbeiter sind, der seinen Workflow verbessern möchte, oder ein Entwickler, der die von seinem Team gewünschten Funktionen bereitstellen möchte, dieser Beitrag sollte für Sie wertvoll sein.

Die Möglichkeit, Leads von Ihrer Website zu erfassen und sie an Ihren Salesforce-Datensatz zu übermitteln, damit sie von Ihrem Vertriebsteam weiter genutzt werden können, bietet großen Nutzen. Wir zeigen Ihnen zunächst eine schnelle Lösung mit einem Text-Widget und stellen Ihnen dann ein spezielles Salesforce-Lead-Widget zur Verfügung.

Hinzufügen des Markups zu einem Text-Widget

Salesforce bietet ein Web-to-Lead-Setup an, das, wenn Sie ein Webformular in Salesforce einrichten, einen Code wie folgenden ausgibt:

https://YOUR_UNIQUE_SALESFORCE_DOMAIN.lightning.force.com/lightning/setup/LeadWebtoleads/home

<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: Please add the following <META> element to your page <HEAD>.      -->
<!--  If necessary, please modify the charset parameter to specify the        -->
<!--  character set of your HTML page.                                        -->
<!--  ----------------------------------------------------------------------  -->

<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">

<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: Please add the following <FORM> element to your page.             -->
<!--  ----------------------------------------------------------------------  -->

<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

<input type=hidden name="oid" value="YOUR_ORGANIZATION_ID_FROM_SALESFORCE">
<input type=hidden name="retURL" value="http://">

<!--  ----------------------------------------------------------------------  -->
<!--  NOTE: These fields are optional debugging elements. Please uncomment    -->
<!--  these lines if you wish to test in debug mode.                          -->
<!--  <input type="hidden" name="debug" value=1>                              -->
<!--  <input type="hidden" name="debugEmail"                                  -->
<!--  value="antony.siegert@infopark.de">                                     -->
<!--  ----------------------------------------------------------------------  -->

<label for="first_name">First Name</label><input  id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>

<label for="email">Email</label><input  id="email" maxlength="80" name="email" size="20" type="text" /><br>

<input type="submit" name="submit">

</form>

Scrivito Text-Widgets rendern HTML, sodass Sie diesen Code einfach in den Widget-Eigenschaften hinzufügen können, und schon geht's los! Es gibt allerdings einen Haken: Es gibt kein Styling. Wenn das Formular nur eine E-Mail-Adresse abfragt, könnte es in Ordnung sein. Andernfalls lesen Sie weiter, und wir zeigen Ihnen, wie Sie ein Salesforce Lead Widget erstellen können! Wenn Sie kein Entwickler sind, senden Sie diesen Artikel an einen, damit er Sie und Ihre Scrivito-gesteuerte Website unterstützen kann.

Erstellung eines Salesforce Lead Widgets

Zunächst werfen wir einen Blick auf den von Salesforce generierten Code und wie wir ihn für Ihre Redakteure in Scrivito nutzen können. Um es einfach zu machen, werden wir das Kontaktformular aus der Beispiel-App nehmen und es so umwandeln, dass es die Daten an Salesforce sendet, anstatt die Formulardaten an Netlify zu übermitteln. Um zu beginnen und beide Formulare in Ihrer Widget-Bibliothek verfügbar zu machen, erstellen Sie eine Kopie des Ordners ContactFormWidget, benennen Sie die Kopie in SalesforceLeadWidget um und passen Sie die darin enthaltenen Dateien sowie deren Inhalte entsprechend an. Dazu gehören die Namen und Titel von Klassen, Komponenten und Bearbeitungskonfigurationen.

Damit das SalesforceLeadWidget an Salesforce übermittelt, müssen wir Folgendes zur Formularkomponente hinzufügen:

src/Widgets/SalesforceLeadWidget/SalesforceLeadWidgetComponent

<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">

<input type=hidden name="oid" value="YOUR_ORGANIZATION_ID_FROM_SALESFORCE"> (15 digits)

<input type=hidden name="retURL" value="http://">
Das SalesforceLeadWidget <form>-Element hat bereits ein method-Attribut, sodass wir nur das action-Attribut und den Wert hinzufügen müssen. Die beiden verborgenen <input>-Elemente von Salesforce können überall innerhalb des neuen Formulars hinzugefügt werden. Der einzige andere Schritt besteht darin, die htmlFor-Werte für jedes <label> sowie die id- und name-Attribute für die entsprechenden <input>-Elemente zu aktualisieren. Wir empfehlen, jedem <input> ein maxLength-Attribut hinzuzufügen, wie es im Salesforce Web-to-Lead-Code definiert ist. Sie können effektiv jedes beliebige Eingabefeld hinzufügen, das Sie in Ihrem Formular erfassen möchten. Salesforce verfügt über eine umfangreiche Liste vordefinierter Werte, die Sie Ihrem neuen Formular zuordnen können. Außerdem ermöglicht Salesforce das Hinzufügen von benutzerdefinierten Eingabefeldern zur Erfassung individueller Daten. In unserem Beispiel werden wir das Salesforce-Feld description dem Feld message des Formulars zuordnen. Mit diesen Änderungen ist das Formular einsatzbereit. Scrivito ermöglicht Ihnen jedoch noch viel mehr.

editierbare Attribute

Die retURL steht für die Rückgabe-URL, zu der der Besucher nach erfolgreicher Übermittlung des Formulars geleitet werden soll. Wenn man davon ausgeht, dass dieses Formular mehrfach verwendet wird, eröffnet die Möglichkeit, es zu bearbeiten, Ihren Redakteuren eine Vielzahl von Möglichkeiten. Sie könnten Besucher einfach zur Homepage, zu einer Landingpage mit einem kostenlosen Angebot oder Ihrem neuesten Blogbeitrag weiterleiten. Die Möglichkeiten sind endlos, also lassen Sie sie entscheiden. 
Der oid-Wert steht für die von Salesforce bereitgestellte Organisations-ID. Sie kann sich im Laufe der Zeit oder des Projekts ändern. Durch die Möglichkeit der Bearbeitung wird ein Entwicklungsschritt und ein Bereitstellungszyklus weniger benötigt. Um dies zu erreichen, müssen wir lediglich den Eingabewert aus dem CMS abrufen, indem wir die Widget-Komponente wie folgt aktualisieren.

src/Widgets/SalesforceLeadWidget/SalesforceLeadWidgetComponent.js

<input type="hidden" name="oid" value={widget.get("orgID")} />
<input type="hidden" name="retURL" value={widget.get("returnURL")} />

Diese neuen Werte müssen auch als Attribute in der Widget-Klasse hinzugefügt werden, etwa so:

src/Widgets/SalesforceLeadWidget/SalesforceLeadWidgetClass.js

orgID: "string",
returnURL: "string",

Da die Werte auf der Webseite nicht sichtbar sind, benötigen wir einen Ort, an dem sie bearbeitet und aktualisiert werden können. Daher fügen wir sie auch zur Bearbeitungskonfiguration hinzu:

src/Widgets/SalesforceLeadWidget/SalesforceLeadWidgetEditingConfig.js

orgID: {
      title: "Organization ID",
      description: "Provided in Salesforce Web-to-lead form snippet.",
    },
    returnURL: {
      title: "Return URL",
      description: "Page you want the visitor to go to after form submission.",
    },
  },
  properties: ["agreementText", "buttonText", "backgroundColor", "orgID", "returnURL"],

Damit ist das Formular für Ihre Redakteure entsprechend anpassbar und einsatzbereit. Wenn Sie den vollständigen Code sehen oder dieses Widget einfach als NPM-Paket installieren möchten, sind ein entsprechendes GitHub-Repository und ein Paket namens scrivito-salesforce-widget verfügbar.

Einschränkungen

Bei "Web-to-Form" gibt es eine Begrenzung von 500 Übermittlungen pro Tag. Übermittlungen die das Limit von 500 pro Tag überschreiten, werden per E-Mail an den im "Web-to-Lead"-Setup angegebenen "Standard-Lead-Ersteller" gesendet, sodass keine Leads verloren gehen.

Wir haben absichtlich ein paar Dinge übersprungen, um den Beitrag kurz zu halten. Wenn Sie Probleme haben, gibt es ein paar Punkte zu überprüfen. Die Scrivito Example App ist bereits mit "charset=UTF-8" eingestellt; wenn Sie dies in Ihrem Projekt geändert haben, können Sie das <meta>-Tag zu "public/catch_all_index.html" hinzufügen.

Salesforce enthält einen Debug-Modus, der gut funktioniert, wie im "Web-to-Lead"-Code-Snippet zu sehen ist. Sie können dies auch Ihrem Formular hinzufügen, um es zu debuggen und es entfernen oder auskommentieren, wenn Sie fertig sind.


Zum Abschluss...

Wir hoffen, dass Sie diesen Beitrag hilfreich fanden und ihm problemlos folgen konnten. Wir haben mit diesem Beispiel nur an der Oberfläche der Integration mit Salesforce gekratzt. Wenn Sie eine vollständige Integration mit Salesforce oder einem anderen Dienst wünschen, lassen Sie es uns wissen. Wenn Sie Fragen haben, steht Ihnen unser Team zur Verfügung. Fragen Sie einfach.

Scrivito CMS: der Content-Hub für Ihre Websites und Apps

Scrivito CMS ist unsere komplette Unternehmenslösung für Digital-Experience-Plattformen, Websites und Webanwendungen der nächsten Generation. Als Software as a Service benötigt Scrivito keine IT-Wartung. Das Content-Management-System ist äußerst flexibel und erfüllt höchste Sicherheitsstandards.

Demo anfordern