Add URL Parameters to an Embedded Link

This article expands on the Embedded Link field settings.

1. How Does it Work?
2. How Do I Set it Up?
3. Mirroring Call Data to the Field

Previously, the iframe content shown during a call was from a hardcoded link in the field configuration process and could not be modified by the agent. Now, when configured, this field can be personalized by agents during a call with URL parameters that are mirrored to the Embedded Link in order to dynamically generate custom content on the fly.  

1. How Does it Work?

• The field uses mirrored logic (information mirrored into the Embedded Link from another field in the script) to create a URL Query String.
  • For example: 
    • The URL for Google Maps is https://google.maps.com
      
    • If a user goes to that site and types "19154" as the area they want to search, the page will reload using the following URL Query String:
      https://www.google.com/maps/place/Philadelphia,+PA+19154
      
    • The parameters "Philadelphia" "PA" and "19154" have been added to the query string.
    • The map is then narrowed down to the location specified.

Before you utilize this feature, please verify that the server hosting the iframe is set up to allow embedding. If not, the content will not display inside your script.

2. How Do I Set it Up?

The following is an example of an Embedded Link field with zip code data mirrored to it in order to create a custom URL query string using parameters.
*This sample references a test app that was configured for testing and documentation purposes and highlights only one possible use case.

• Click to add a Text input field to your script slide
  • Assign the field's Label and add Prompt text
    • In this case: Zip code / What zip code are you calling from?
  • Set Standard Field assignment
  • Configure any other Options, Placeholder Text, and Validity/Visibility Conditions
    
    
• Click to add the Embedded Link field to your script slide
  
  
  
• On the Field Settings pane:
  
  
  
  • Assign the field's Label and add Prompt text
  • Fill in the site portion of the web address after the https:// in this case it is s3.amazonaws.com/embed-url-param-test/index.html
  • Click +Add a param 
    
    
    
    • Name: zipcode
    • Default Value: 19107
       
      These fields are case sensitive, and all letters MUST be typed in lower case.
      The text here is also being appended to a URL so it MUST NOT contain spaces or special characters that are not supported.*
      BOTH fields (Name and Default Value) must be filled out. Leaving one blank could result in a 400 Bad Request error.
      
      *Supported characters include: alphanumeric, plus $ - _ . + ! * ' ( ) ,
      
      
      • Click the + to add additional parameters
      • Click the x to delete additional parameters
        
  • As you input information into the above fields, the URL Preview will update to show the URL with the added parameters:
    
  • The preview pane on the right will also update as you add parameters.
    
    *This test app was designed to do zip code lookups. Your individual results will vary.
    
    
  • You can also Copy to Clipboard and paste the new URL into a browser.

 Save time by copying the URL from your browser into the script.
Let SC WorkFlow break down the URL for you. Simply browse to the webpage you would like to use as the default, copy the entire URL, then paste into the URL text box. 
*Remember to REMOVE the "https://" from the address since it is hard-coded.
SC WorkFlow will automatically parse the URL and create the parameters for you.

3. Mirroring Call Data to the Field

In most cases, the URL parameters will not be static or use the default value.
By mirroring data from another script field into the Embedded Link, the query string can be dynamically generated based on information gathered from the customer.

[Using the above example]

From the settings of the Embedded Link field:

• Click on Mirroring
• Select the Mirror From field in the dropdown
• Local value will auto-populate since there is only one parameter set
  
• Click Update to save and close the pop-up
  *You can also Mirror To the Embedded Link from a valid field.

To test the feature:

• Add the script to a CommFlow
• Run the script in a browser
• The zip code typed into the text field will automatically update the URL and be shown in the iframe.