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

Salesforce offers a Web-to-Lead setup which, if you set up a webform in Salesforce, concludes with providing some code which looks like this:

https://YOUR_UNIQUE_SALESFORCE_DOMAIN.lightning.force.com/lightning/setup/LeadWebtoleads/home
Copy
<!--  ----------------------------------------------------------------------  -->
<!--  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 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:

src/Widgets/SalesforceLeadWidget/SalesforceLeadWidgetComponent
Copy
<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://">

The 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.

src/Widgets/SalesforceLeadWidget/SalesforceLeadWidgetComponent.js
Copy
<input type="hidden" name="oid" value={widget.get("orgID")} />
<input type="hidden" name="retURL" value={widget.get("returnURL")} />

These new values also need to be added as attributes in the widget class, like so:

src/Widgets/SalesforceLeadWidget/SalesforceLeadWidgetClass.js
Copy
orgID: "string",
returnURL: "string",

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:

src/Widgets/SalesforceLeadWidget/SalesforceLeadWidgetEditingConfig.js
Copy
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"],

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.

More great blog posts from Antony Siegert

  • Integrating Mailchimp with Scrivito

    There are a myriad of ways to collect email addresses to communicate with your audience. Mailchimp is one of those, and, if you are not familiar with it, you should check them out. Mailchimp is an all-in-one marketing platform that provides quite a lot of features. The most basic feature is...

  • Expanding Scrivito’s Pricing Options

    Announcing new pricing options for Scrivito As we expand the feature set of Scrivito, we also have to determine the most appropriate pricing model for our customers. We have always considered pricing to be an important factor, but the fact remains that the product needs to grow, and requests from...

  • Example App Updates

    What is new in the Example App? The Example App has been a big part of the Scrivito journey, not only for you – our customers – but also for us as developers. We developed the Example App to showcase some of what could be done when implementing a Scrivito-based app. It is used, every day, to test...

  • Customizable Page Menus

    Scrivito’s top-right menu is customizable! Menus can make editors’ lives much easier, and we have had several requests to add items to the menu to aid in a more efficient content generation. So, our developers worked hard and took our mantra of complete developer flexibility to heart. Beginning...

  • The Scrivito Example App now Uses Bootstrap 4

    With Bootstrap 4 finally being released to the wild and with all the new features, of course, we wanted the Scrivito Example App to have the latest and greatest. After all, the Scrivito Example App is our showcase for implementing the Scrivito CMS. While the change from Bootstrap 3 to Bootstrap 4...

  • A/B Testing with Scrivito and Google Optimize

    Fine tuning a website takes time, and there are many options to consider. But when it really comes down to it, it's important to find out if the visitors are happy with the improvements. To do this, we need to compare their reactions to the present and the improved versions of the pages...

  • How to Create a Blog Post in the Example App

    Creating a blog post is simple with the Example App. A blog post has an author, so we will want to add our author page, too. Every blog post page consists of a title, a subtitle, and a widgetlist. The widgetlist is where you will build up the body of the blog post using the available widgets in...

  • Testing Your Scrivito-Based Rails App 

    The question of how to test Scrivito-based apps comes up less often than you would expect, but none the less it is asked. Remember that Scrivito is just Ruby, but being mainly an API, there are some caveats. It is best kept in mind what Scrivito is, a Content Management System, so your testing...