In this tutorial, you will learn how to effectively integrate Salesforce with Voiceform to optimize your business processes. We will provide step-by-step instructions on how to set up the integration and utilize its various features. By the end of this tutorial, you will have a clear understanding of how to leverage the powerful combination of Salesforce and Voiceform to create interactive forms and surveys. You will also gain insights on how this integration can enhance your CRM capabilities and improve customer engagement.

Connecting Salesforce Account to Voiceform

✅

Before connecting to Salesforce please make sure that the requirements bellow are covered:

• You have the Salesforce Integration enabled on your Voiceform account. If it isn't enabled, please reach out to Voiceform customer support team.
• You are logged into your Voiceform account and you are the account owner.
• You are logged into Salesforce and your account has permissions to connect external applications.

1. Navigate to your Account page https://app.voiceform.com/dashboard/account

2. Click "Connect Salesforce Account". This should redirect you to the Salesforce login page.

3. Login to Saleforce.

4. Accept Requested Permissions for Voiceform integration

Map data from Voiceform to Salesforce

💡

Tip

Before creating data maps make sure you have connected your saleforce account with Voiceform.

1. Open the Voiceform that you wish to connect to Salesforce.
2. Click "Connect"

3. Click "Data Mapping"

Creating a new record in salesforce

1. Click "Create new action"

2. Click the "Select an object" field.

3. Select a salesforce object where you want to pass your data. For example "Case."

4. Select an action. Let's try to create a new record first.

5. Click "Create Record"

6. Select a question you would like to be mapped to the object field.

10. If you selected the "voice response" question type you have more options for mapping.

7. If you want to pass metadata values to salesforce please select "Metadata attribute".

12. Type the metadata attribute key. For example "custom_id". This key should be passed as a query parameter when you share your form.
    (Link example: https://app.voiceform.com/to/dbddjddiqdkx/?**custom_id=dsndjn-232dsbd-2378d**)

8. Click "Create new mapping"

Updating existing record in salesforce

1. Instead of creating a new action, let's update one. . Click "Create new action"

2. Click the "Select an object" field.

3. Select salesforce object.

4. Selecet "Update Record"

5. Type a record lookup key. This key is used to find the record id in Salesforce and it must be passed when you share a form link. By default the key name is record_id.
   E. g. [[https://app.voiceform.com/to/dwhdvqwj/?case_id=webckcwbb]]

6. Click "Add new mapping item"

7. After this the process is the same as for "Create Record" action.

👍

Verify The Mapping

When actions are added, it's time to test it. Try to submit the form and confirm the changes are applied to salesforce records.

Adding Voiceform in Post-Chat Experience

Adding required files

1. Open Developer Console

2. Create a new Apex Class file. This class will be responsible for taking all the parameters from the chat and passing them to voiceform survey link. Select "Apex Class" and type "VoiceformController"

3. This should create a new file with empty class.
   public class VoiceformController {}

4. Insert this code into this class. You may just copy and paste it.
5. Change 'YOUR_SURVEY_LINK' to the actual survey link. E. g. https://app.voiceform.com/to/XXXX

6. Okay now let's create a page that will render the form. Select "Visualforce Page" and type "Voiceform Page"

7. Click "OK"

8. Paste this code into this page.

Tip: If your post-chat experience redirects users to a separate window or browser tab you can just redirect the user. That means you can clear the previous code and just use this instead [[<apex:page controller="VoiceformController" action="{!redirect}" showHeader="false" >]]

9. Click here. And select "Service Setup"

10. Now connect "VoiceformPage" with some site. In "Service Setup" Search for "Sites".

11. Use existing or create a new site.

12. Find "Active Site Home Page" field.

13. Hit search icon.

14. Search for "VoiceformPage" and select it

15. Save

16. Add our site and page to the chat button. Search for "buttons" and click "Chat Buttons & Invitations".

17. Select an existing button or create a new one.

18. Add site in "Site for Resources" and our "VoiceformPage" in "Post-Chat Page"

19. Click "Save" button.

20. Click the "Quick Find" field.

21. Let's try to embed the chat button. Find and click "Embedded Service Deployments"

22. Click on your button.

23. Click "Get Code"

24. Click "Copy to Clipboard"

25. Create a new visualforce page for chat preview "PreviewChat"

26. Paste the copied code inside of <apex:page></apex:page>`

27. Before the closing of tag add the the script to enable access to the microphone and camera. If the post-chat experience opens the page in a separate browser window/tab you can skip this step.
    JavaScript

    window.addEventListener('message', function(event) {
          // Check for the correct message and perform action
          if (event.data.action === 'updateIframeSrc') {
              var iframe = document.querySelector('.snapins_postChat');
              if (iframe) {
                  iframe.setAttribute('allow', 'microphone; camera');
                  iframe.src = event.data.url;
              }
          }
      }, false);
    

Preview the result

1. Now its time to see the experience in action. Go to Service Setup and search for "Pages". Click on "Visualforce Pages"

2. Find and click on the page where the chat button code was added. For this example it was "PreviewNewChat"

3. Click "Preview".

4. You should be able to see the page with the button at the bottom.

5. After interacting with an agent and when chat is finished it should show such menu. Click "Give Feedback"

6. Tada! Voiceform has been imbedded into the chat.