Integrating Salesforce with Scrivito
As we continue to add enterprise-level features to Scrivito, we decided to look at other enterprise-level services to integrate. Salesforce is one of those and has a ton of features. We could hire someone full-time just to build integrations to show you the power and flexibility of both Scrivito and Salesforce. Our customers have built many custom integrations and use the two services for all their strengths together. Salesforce also offers a robust API for using their services from within your Scrivito application, if you need more options. However, we will keep it basic here because time has shown us that whatever we build, it will be customized. Whether you are a sales or marketing person looking to improve your workflow or a developer looking to provide the features your team is requesting, this post should be full of value.
The ability to capture leads from your website and submit them to your Salesforce dataset to be further utilized by your sales team provides great benefit. Follow along as we are first going to offer you a quick solution using a text widget, and then provide you with a dedicated Salesforce lead widget.
Add the Markup to a Text Widget
Scrivito text widgets render HTML so you can just add this code in the widget properties, and away you go! There is a caveat though: there is no styling. If the form is just getting an email address, it might be fine, otherwise, keep following along and we will show you how to build a Salesforce Lead Widget! If you are not a developer, send this article to one and have them empower you and your Scrivito-driven website.
Build a Salesforce Lead Widget
To start, let’s take a look at the code generated from Salesforce and how we can use it to work for your editors in Scrivito. To make this simple, we are going to take the contact form from the Example App and convert it so that it sends the data to Salesforce instead of submitting the form data to Neltlify. To start and to make both forms available in your widget library, make a copy of the ContactFormWidget folder, rename the copy to SalesforceLeadWidget, and adjust the files in it as well as their contents appropriately. This will include class, component and editing-config names and titles.
To have the SalesforceLeadWidget submit to Salesforce, we need to add the following to the form component:
SalesforceLeadWidget's <form> element already has a method attribute so we just need to add the action attribute and value. The two hidden <input> elements from Salesforce can be added anywhere within the new form. The only other step is to update the htmlFor values for each <label> as well as the id and name attributes for the corresponding <input> elements. We recommend adding a maxLength attribute to each <input> as defined by the Salesforce web-to-lead code. You can effectively add any input field you wish to capture in your form. Salesforce has a large list of built-in values you can map to your new form. As well, Salesforce allows you to add custom input fields to capture unique data. In our case, we will map the Salesforce description field to the form’s message field. With those changes, the form is ready for use. However, Scrivito lets you do so much more.Make It Editable
The retURL stands for the return URL you want the visitor to be directed to after successfully submitting the form. Assuming that this form will be used multiple times, making it editable opens a world of possibilities for your editors. They could simply redirect visitors to the homepage, a landing page with a free offer or your latest blog post. The possibilities are endless, so let them decide. The oid value stands for the organization ID provided by Salesforce. It may and can change over time or project. So, by making it editable, one less development task and deploy cycle are needed. To do this, we just need to get the input value from the CMS by updating the widget component as follows.
These new values also need to be added as attributes in the widget class, like so:
And, since the values are not visible on the web page, we need a place to edit and update them so we add these to the editing configuration as well:
With that, the form is appropriately customizable for your editors and ready to use. If you would like to see the full code or just install this widget as an NPM package, a corresponding GitHub repository and a package named scrivito-salesforce-widget are available.
Caveats
With “web-to-form”, there is a limit of 500 submissions per day. Submissions over the 500 limit per day are sent via email to the “Default Lead Creator” specified in the “web-to-lead” setup, so no leads are lost.
We intentionally glossed over a couple of things to keep the post short. If you are having trouble, there are a couple of items to check. The Scrivito Example App is already set with a “charset=UTF-8”; if you changed this in your project, you can add the <meta> tag to “public/catch_all_index.html”.
Salesforce includes a debug mode that works nicely as seen in the “web-to-lead” code snippet. You can add this to your form for debugging as well and remove or comment out when you are done.
In Closing...
We trust that you found this post to be helpful and have been able to follow along. We’ve only scratched the surface of integrating with Salesforce with this example. If you would like to see an integration with Salesforce or with some other service in full, just let us know. If you have any questions, our team is available to assist you, just ask.
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.
