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.
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.
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
methodattribute 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
htmlForvalues for each <label> as well as the
nameattributes for the corresponding <input> elements. We recommend adding a
maxLengthattribute 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
descriptionfield to the form’s
messagefield. With those changes, the form is ready for use. However, Scrivito lets you do so much more.
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 “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.
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.