Set Up Inbound Scheduling for Existing Customers

Learning Objectives

After completing this unit, you’ll be able to:

  • Add the inbound appointment flow to the Experience Cloud site.
  • Create an embedded service and connected app.
  • Get the embedded service up and running on your website.
  • Set up cross-origin resource sharing.

An Experience Cloud Site and a Website

Matt has sorted out the settings situation and it’s time to give existing customers the power to schedule and modify appointments. There are two ways he can set up scheduling for existing users.

  • Add the inbound appointment flow to the Experience Cloud site.
  • Use an embedded service and connected app to add the inbound appointment flow to an external website.

Matt adds the inbound appointment flow to the Experience Cloud site. Here’s what he does.

  1. From your inbound scheduling site, click Experience Builder in the profile menu.
  2. In Experience Builder, select the Components icon.
  3. Enter Flow into the search box.
  4. Drag the Flow component onto the canvas.
  5. From the Flow list, select the desired standard flow template, such as Inbound New Appointment, Inbound Modify Appointment, Inbound Cancel Appointment, or a custom inbound scheduling flow.
  6. Click Publish to save and publish your changes.

The Inbound New Appointment flow with the Publish button at the top.

Fola wants customers to be able to schedule and modify appointments from the bank’s site too. Matt embeds the inbound scheduling service (or flow) into the website so that appointment booking and rescheduling are easily accessible to customers. 

Create an Embedded Service

Matt creates an embedded service that he can add to the website to expose the inbound appointment flow.

  1. From Setup, enter Embedded Service in the Quick Find box, and then select Embedded Service Deployments.
  2. Click New Deployment.
  3. Give a name to your new deployment. Matt enters Inbound.
  4. From the Site Endpoint list, select your Experience Cloud site or Salesforce site that you want to use, and click Save.
  5. On the Embedded Service Deployment Settings page, under Appointment Management Settings, click Start.
  6. Select Let Customers Schedule New Appointments and Let Customers View Their Appointments, and click Save.
  7. Under Login method, click Edit.
  8. From the Login Method list, select Digital Experiences, and click Save.
  9. Under Scheduling flows, click Edit.
  10. For each of the three fields, select an appropriate appointment scheduling flow or a custom flow. 
    • New Appointment Flow: In_New
    • Cancel Appointment Flow: In_Cancel
    • Modify Appointment Flow: In_Modify 
  11. Click Save.
  12. If you want to customize your appointment scheduling interface, click Edit under Additional branding.

Edit Scheduling flows window.

Stay Connected

Next, Matt creates a connected app to provide authorization for customers.

  1. In Setup, search for App Manager and select App Manager.
  2. Click New Connected App.
  3. Enter a Connected App Name, such as Inbound Connected App.
  4. Enter a contact email.
  5. Under API (Enable OAuth Settings), select Enable OAuth Settings.
  6. Enter a callback URL. For example, if your website is https://cumulusbank.com, you can create a page for the callback and host it as https://cumulusbank.com/inbound-callback.html.
  7. Move Allow access to your unique identifier (openid) from the Available OAuth Scopes list to the Selected OAuth Scopes list.
  8. Click Save, and then click Continue.
  9. On the Inbound Connected App page, under API (Enable OAuth Settings), copy and save the Consumer Key. You need this key when you create an external page for your inbound scheduling flow.
  10. Click Manage, and then click Edit Policies.
  11. Under OAuth Policies, for Permitted Users, select Admin approved users are pre-authorized, and click Save.
  12. Under Profiles, click Manage Profiles.
  13. Select the System Administrator profile and the profiles of the users who will access the inbound scheduling flow through embedded service on your website.
  14. Click Save.

Copy and Paste

Matt’s done the groundwork that was required to set up the embedded service. It’s now time to get that special piece of code that he can paste into the new website. Once that’s done, website visitors can book and modify appointments from within that webpage.

  1. From Setup, enter Embedded Service in the Quick Find box, and then select Embedded Service Deployments.
  2. Click the dropdown arrow for your embedded service (Inbound in this case) and select View.
  3. Under Embedded Service Code Snippets, click Get Code.
  4. Under Chat Code Snippet, click the Copy to Clipboard link, and then click Done.

Embedded Service Code Snippets window showing codes to be copied.

Next, Matt pastes the code and edits it for use.

  1. Paste the code in a text editor or web publisher.
  2. In the code, set the values of these parameters as described in this table.
    Parameter Value
    embedded_svc.settings.useCustomAuthentication  Verify that the value is set to false.
    embedded_svc.settings.loginClientId
    Enter the consumer key that you copied when you created your connected app.
    embedded_svc.settings.loginRedirectURL
    Enter the callback URL that you entered when you created your connected app.
    embedded_svc.settings.loginTargetQuerySelector  Enter #salesforce-login
    embedded_svc.settings.authenticationStartLabel Enter a message that you want to display when authentication is complete.
  3. Paste the modified code snippet within the <body> tag of your website’s page on which you want to make the inbound flows available.
  4. On the callback page, enter the following code snippet. Replace the Cumulus website references in the code snippet with your website and Experience Cloud site details: "Site URL" with your Experience Cloud site’s URL, and "cumulusbank.com" with your company’s website domain URL. To find your Experience Cloud site’s URL, got to Setup > Digital Experiences > All Sites.
<!DOCTYPE html>
<html>
<head>
<meta name="salesforce-community" content="Site URL">
<meta name="salesforce-mode" content="popup-callback">
<meta name="salesforce-save-access-token" content="true">
<meta name="salesforce-allowed-domains" content="cumulusbank.com">
<script src="Community URL/servlet/servlet.loginwidgetcontroller?type=javascript_widget"
async defer></script>
</head>
<body></body>
</html>

The last step is to set up cross-origin resource sharing (CORS) to make sure that the web browser works seamlessly with the embedded service.

  1. From Setup, enter CORS in the Quick Find box, and then select CORS.
  2. Click New.
  3. In the Origin URL Pattern field, enter your website’s domain URL, and click Save.

And it’s done! With the inbound appointment scheduling flow added to the Experience Cloud sites and embedded on the new webpage, the bank’s existing customers can easily schedule and modify appointments

Resources