Course Content
Apps – Advanced
0/6
Events – Intro – AI App Builder
00:00
Events – Mapping Values – AI App Builder
00:00
Events – Pushing Values upon complete – AI App Builder
00:00
Events – Login Page – AI App Builder
00:00
Modifying the OTP page – AI App Builder
00:00
Course Exercise: Connect Your Web App to Salesforce – AI App Builder
00:00
Apps – Advanced

Course Exercise: Connecting Your App to Salesforce

Now that your form layout and pages are ready, it’s time to make them functional. In this guide, you will connect your form to Salesforce so that every submission automatically updates or creates a contact and logs a support case.

Step 1: Create a Form Submission Event

  1. Open your app in the Noca AI editor and make sure you are on the Preview tab.

  2. In the top-right toolbar, click Events.

  3. Locate the On Click “Send message” trigger on the left sidebar and click it to open the visual flow builder.

Step 2: Add a Salesforce Contact Upsert Node

Instead of a simple insert, we will use an “upsert” action. This ensures that if a contact already exists with the submitted email, it updates their record instead of creating a duplicate.

  1. Click the (+) Add Node button in the flow workspace.

  2. Select Salesforce from your suggested integrations.

  3. Under Select an Action, choose Upsert.

  4. Under Select an Object, choose Contact, then click Insert Node.

Step 3: Set Your Lookup Condition

We need to tell Salesforce how to identify an existing contact.

  1. Click on your new Upsert Contact node to open its properties on the right.

  2. In the Condition section, set the Where field to Email.

  3. Open the Data Kit panel, expand your page inputs, and drag the Email field from your form into the value slot next to “Email”.

Step 4: Map Your Contact Fields

  1. Under Mapping in the properties panel, click Add Fields.

  2. Add First Name, Email, and Mobile Phone (Last Name is required and mapped by default).

  3. Use the Data Kit to drag and match the corresponding form fields (First Name, Email, and Phone Number) to their respective Salesforce targets.

Step 5: Add a “Create Case” Action

Once the contact is created or updated, we want to log their message as a support case in Salesforce.

  1. Drag a connector line from the Upsert Contact node to create a new action.

  2. Select Salesforce again.

  3. Set the action to Create and choose Case as the object. Click Insert Node.

Step 6: Link the Case to the Contact and Map Form Data

  1. Click the Create Case node. Noca AI automatically maps the Contact ID from your previous upsert step.

  2. Click Add Fields and select Subject, Description, and Priority.

  3. Map the fields from your form using the Data Kit:

    • Map Subject to your form’s Subject field.

    • Map Description to your form’s Message field.

    • Map Priority to the Selected Value of your priority dropdown.

Step 7: Go Live and Save the Integration

  1. In the top toolbar of the flow builder, click Go Live.

  2. Confirm the version publication.

  3. Close the flow builder and click the purple Save button in the left panel of the editor to finalize and wire up the integration.

Step 8: Test Your Integration and Verify Logs

  1. Click Preview (or Run) in the top right to open your live staging site.

  2. Fill out the form with test details, select a priority, and click Send Message.

  3. Once redirected to the success page, head back to your Noca AI dashboard and click Logs in the top menu.

  4. Click Click to Debug on your latest run to visually trace the execution path and confirm that your Contact and Case records successfully registered in Salesforce.

Previous
Next