Connecting your Contact Form to Salesforce (Advanced)
Last updated
Last updated
This article covers how to connect the Contact Form app built in the earlier sections to Salesforce, making it possible to save or update users’ information as a Salesforce Contact through the application.
Prerequisite
You will need to have a Salesforce account or developer instance in order to create a Salesforce integration in Airkit. To sign up for a salesforce developer account, go to https://developer.salesforce.com/signup.
You will also need access to the Contact Form described in the previous article.
Here you will initiate a CSAT (customer satisfaction) modal to pop up once the user enters in their information and clicks on the "Submit" button.
The CSAT modal will be added from KitCloud.
In Web Builder, click on the '+' icon next to Web Flows to open KitCloud and select the CSAT template from the Customer Experience options.
Now that the CSAT template is added as a new Web Flow, select the type of CSAT you want to keep. In this example, the CSAT with square edges will be used:
The other two options can be deleted:
In Web Builder, go to the “Submit” button in the Contact Info Web Page.
In the Inspector section, click on Actions. You will see the Navigate to Web Flow Action leading users to the Thank You page after submitting the form.
Now, click on the '+' icon and add the Open Modal Action from the Web options. A Modal allows Web Flows to behave like popups.
Select the CSAT Web Flow.
Integrations are how external systems connect within Airkit. You’ll start configuring the integration in the Console and then continue in the Studio.
Go to Integrations. Click on Create new, type a name and select the Salesforce integration. Then click on Create.
If you are not logged into your Salesforce instance, a popup will display asking you to enter your credentials.
Access your Contact Form app and go to Configuration Builder. This is where you connect your resources to Airkit. Scroll down to Integrations and click on New. Then select Salesforce from the Adapters.
In Connected Account, select from the dropdown the one you have just created in the Console.
Save the app.
This section will go over the Salesforce Data Operation.
First, go to Connection Builder.
In Connection Builder, you will see the “Insert Content” Data Flow that was added when the Contact Form was built in the previous section. Add the Salesforce data operation to it by clicking on the '+' icon. Search for Salesforce and select it.
In Datasource, select "Salesforce", which is the name of the integration previously created, and under Operation, select the type of action you want to perform. In this case, it’s going to be the creation of a new record.
In** Object Type**, select Contact. The Object Body displays the properties you need to create a Contact Object. In this case it requires a Last Name, so the name Variable in your Contact Form needs to be passed here. Add the other fields one by one: phone, email and company.
You can do a quick test within this Data Operation by clicking on Run:
The record should be created in Salesforce. Take note of the "id" property
To continue with the Web Flow, after clicking on “Submit”, the CSAT Modal will open for users to select a score. That score will be recorded and then that information will also be passed to the user’s record, thus updating it.
To perform updates, Salesforce requires you to have the ID of the records, which we will be saved as a global variable in the app.
In Connection Builder, click on the Salesforce Variable. This Variable contains the output of the operation that was run.
Add a Transform Data Operation to the Data Flow in order to parse the output of the previous operation.
In Transform Expression, enter the Salesforce Variable and parse through the variable by appending “.result.id” to the end. This way only the ID is shown. Then select Type Text so that you can read the value without the JSON format. Then rename the Transform Variable with a more intuitive, like “SalesforceID”.
Finally, select “SalesforceID” as the End Return Value. This will allow you to pass the ID as an output of the Data Flow.
This will be used later on to pass the CSAT score and comments associated to update the record in Salesforce. This will be visited when configuring the CSAT Web Flow.
In Connection Builder, click on the Create Blank to add a new Data Flow. Rename it to "Update Record".
As Inputs, create the following three variables of type Text one by one: Salesforce_id, CSAT and Feedback. These variables will allow you to pass in the content from the CSAT Web Flow to this Data Flow.
Add the Salesforce Data Operation. In Datasource, select Salesforce. In Operation, this time add Update record.
In Object Type, select Contact and then, check the Custom Expression box to enter your Salesforce_id variable in the required id field. Finally, since this Data Flow was created to add the information on the CSAT Web Flow to the record, in Update Body, select Contact Description (this is where the info will be stored in the Salesforce record) and then pass the CSAT and Feedback Variables:
When it comes the turn to configure the Event, this Data Flow will be ready to be used.
By creating a global variable that stores the SalesforceID, you will be able to pass it across Web Flows.
Go to Journey Builder and, in the General tab of the Inspector section, click on the '+' icon next to Global Variables. Select a Text type and rename it to "salesforce_id".
So that the user’s information can be stored in the salesforce_id Variable, you need to connect the Data Flow to the “Submit” button in the Contact Form Web Flow.
Go to Web Builder and, in the “Submit” button, add the Run Data Flow action.
Select the “Insert Content” Data Flow and pass the input variables for each of the fields in the form. Finally, in Output Binding, enter the recently created global variable:
Now go to the CSAT Web Flow. In the “Submit feedback” button actions, you will see a pre-configured event. If you click on it, you can see the Inputs that are passing the score and the feedback:
Go back to Journey Builder and click on the CSAT Selected Event. In the Action Builder, add a new Data Flow. Finally, select the “Update record” Data Flow and as Inputs, select the variables corresponding to the Salesforce ID, CSAT score and Feedback fields.
Save the app.
Once the app is all set, it can be tested in the App Preview.
Click on Preview at the right-hand corner of the Studio, which will open a new tab.
Click on the globe icon, which allows the app to be launched from the start.
Complete the fields and click on “Submit”.
As expected, the CSAT Modal will pop up for the user to select the score and add some feedback.
Sign into your Salesforce account or developer instance, click on the App Launcher icon and select Sales Console.
Once in the Sales Console, click on the arrow icon and select Contacts.
Identify the user that was created through the Airkit application. The record should be added updated in Salesforce with the CSAT details in the contact description:
