You've created a Contact form that both collects and stores information from users. Now, let's create an integration that sends that information to Salesforce.
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.
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 Flows 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 Flows 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 as well as the Run Data Flow Action.
- 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 Settings. 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 Connections Builder.
In Connections 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
nameVariable in your Contact Form needs to be passed here. Add the other fields one by one:
- 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
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 Global Variables in the app.
- In Connections Builder, click on the
SalesforceVariable. 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
SalesforceVariable and parse through it 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
TransformVariable 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 Connections Builder, click on Create Blank to add a new Data Flow and rename it to "Update Record".
- As Inputs, create the following three variables of type Text one by one:
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 Use custom expression box to enter your
Salesforce_idvariable 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:
CONCAT(CSAT, “-”, Feedback)
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 the Variables Tree tab and, in the Global Variables, click on the '+' icon. 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 Flows Builder and, in the “Submit” button, select the “Insert Content” Data Flow. 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:
- Click on the CSAT Selected Event, go to Actions and add a new Data Flow. 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:
This application is now ready to be published.
Updated about 24 hours ago
To learn how to publish your application, see Publishing Your Application. To review concepts introduced throughout the process of creating a Contact Form, see Appendix.