Skip to main content

Embedded Service: Flow Screen on 3rd Party Site

If you would like to emulate the web to case functionality on an external (3rd party) website, you can leverage an Embedded Service Flow.  Once configured this will allow unauthenticated users to run a flow from a button on your external web page.

NOTE: When designing the flow to be run in this way you should be very careful in constructing the flow as to not allow the user to query for information they should not have access to. Additionally consider some extra security to help prevent abuse from bots like the CAPTCHA for Flow referenced below.

  1. Create a Screen Flow for intended use by unauthenticated external users. This flow should be restrictive in what it displays as anyone can see it. Using Lookup fields is iladvised for fields like accounts, users, contacts, etc.
    1. Create a screen Element (Remove Pause always and Previous buttons where applicable) 
      1. Add the desired fields to i.e. Recommended follow Flow Naming Conventions . HOWEVER Name the flow something friendly as this displays to users. Run in system context to allow unauthenticated users to run the flow.
      2. BECAREFUL!!! DO NOT USE LOOKUP Fields or allow direct queries of information public users shouldn't have access too!!! Recommended use TEXT Inputs and Creates Do not provide any or limited information back to the user. In your flow description notate this detail so a later admin do NOT make a mistake exposing info!
        1. Contact First Name (Text)
        2. Contact Last Name (Text)
        3. Account Name (Text)
        4. Email
        5. Phone 
        6. Reason For Request (Long Text)
        7. Consider the addition of the Recaptcha Flow Screen Component References:
      3. Perform any looks ups for things like the queue ID instead of hardcoding it.
      4. Create the Record
      5. If desired you can add a finish screen to report back the creation of the record and provide them their reference record number. Again Be sure to remove the previous button to prevent unauthenticated users from spamming record creation.
  2. Create a Site by navigating to Setup and Searching for Sites
    1. New
    2. Site Label
    3. Site Name
    4. Set Site Contact
    5. Set Default Record Owner - note your flow can write over this.
    6. Active - Check
    7. Select an Active Home Page - you may need to create a visualforce page if an existing option isn't sufficient. Shouldn't be necessary for operation of flow.
    8. Make sure your Inactive Site Home Page is branded accordingly. 
    9. Create a robot file if necessary
    10. Important Allow Framing on site pages on external domains (Good Protection)
    11. Anything else unspecified can be left default.
  3. From Setup Search CORS to add the 3rd Party Site.
    1. Click New to add to the Allowed Origins List.
    2. Add the URL example:
  4. Next create an Embedded Service by navigating from and Searching for Embedded Service Deployments.
    1. Click New Deployment
    2. Select Embedded Flow
    3. Set an Embedded Service Deployment Name - this will be visible in the code you put on your site
    4. Set an API Name - this will be visible in the code you put on your site
    5. Site EndPoint: Select the site that you created above.
    6. Next to create the embedded service and be routed to the Embedded Service Deployment Settings.
  5. On the Embedded Service Deployment Settings
    1. You can customize the Flow and Branding settings, but this is not required.
    2. Toggle your Service to Active image-1661627137794.png
    3. Click Get code and copy the "Chat Code Snippet"
  6.  Paste the copied code into a text editor like Sublime Text or VScode.
    1. To Change the Button Text remove the comment slashes from the following: 
      1.         embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert)
                embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline)

                embedded_svc.settings.loadingText = ''; //(Defaults to Loading)

        Recommended change the default messages(display above as '...' but on your site it will say "Start Setup Flow" for each to 'Get Support' or something similar.
    2.  Copy updated code.
  7. Paste on your site or if you want to use the example above of
    1. For testing paste between the <html><body> Paste your code here </body></html>

If you don't want to use the provided button:

  1. Go back into your text editor and set the displayHelpButton to False
    • embedded_svc.settings.displayHelpButton = false
  2. You can instead launch the flow via by invoking the bootstrap embedded chat when using for example a custom button on your site by using the following</script> <button onclick="bootstrapChat()"> Create Support Ticket</button> NOTE This must be within the <script> </script> code copied from SF for it to work. You can leave the default button on if you want multiple points of entry into the flow.


Check the above steps and make sure your flow, site, etc are all active.
Captcha image broken on 3rd party site: 


Additional troubleshooting resources on 

If still having problems feel free to @megalithe (ID 246568944213819393) in the SFXD Discord.