Service and Auth GuidesAPI Reference

Advanced Example: iFraming to Salesforce object using Visualforce

Suggest Edits

❗️

This page refers to the legacy version of Embed

For the updated version please visit our latest Advanced Example Doc

Ready to upgrade to the latest version of Embed? please contact your customer success manager or our support team.

Advanced Example: iFraming to Salesforce object using Visualforce

Ensure you have spoken in advance to your Streem Account Manager. In order to iFrame Streem into any environment, we need to proactively add the Parent site domain information to our iFrame allowList. Failing to do this in advance will result in an iFrame that only loads an error.

This example assumes you are adding Streem to the Leads Object.

Pre-requisites:

Reference ID:
Teams should discuss how reference id decisions will impact your workflow. Streem suggests unique machine generated IDs, but you can elect to use a case number, customer number, policy detail, etc.

allowList:
A conversation should happen with your Streem rep so they can collect the domain details for your implementation. This is needed for allowList purposes, since Streem implements a Content-Security-Policy that prevents usage in an iframe by default.

CRM Admin rights:
Admin rights are frequently required in order to insert your embedded functionality in the CRM system at a team level.

Custom Streem Settings
Streem Account Managers will need to activate "Shared Call Logs" in order for Team members to see calls across your entire team. Streem Calls created by other users will be Read Only.

  • To embed Streem into your Agent Desktop or CRM, the Streem Web App is opened using a specific URL structure, to a page called /embed. Customer invitation details are passed from your CRM to /embed via URL parameters, enabling pre-population of data that you already have (e.g., phone, Session ID, Customer Name, etc.).

Step by Step

As a Salesforce Admin - Set up your Visualforce Asset

Step 1: Create first Artifact

  • Navigate to the Gear icon, select Setup
  • Inside quick search, type "Visualforce"
  • Select "Visualforce Pages"
  • Select the button titled "New"
  • In the page presented, enter the label as "Launch Streem NewCall iFrame"
  • Enter the name as "Launch_Streem_NewCall_iFrame" with included underscores
  • Enter the description as (or notes as you see fit) "Launches Streem New Call functions in an iFrame if added to the Leads page via Lightning App Builder"
  • Checkmark the box "Available for Lightning Experience [...]"
  • Add the following code, adjust variables to match your individual company needs
  • Set the API version to 48 and then press Save
  • Review the Visualforce settings and make sure your page exists.
    -Move on to Artifact 2 creation
<!-- Pull in the Lead Controller Variables and assign it to "l" (lowercase L)-->
<apex:page standardController="Lead">
<apex:variable value="{!Lead}" var="l" />

<!-- Create the Streem /embed URL using the lead details that we know of -->
<apex:variable value="https://YOUR_COMPANY_HERE.streempro.app/embed?redirect=call&source=SFDC" var="embedUrl" />
<apex:variable value="{!embedUrl + '&refId=' + l.Id + '&phone=' + l.phone + '&name='  + l.name}"  var="embedUrl" />
 
<!-- Pop the Streem /embed URL into an iframe -->
<apex:iframe id="streeminvite" src="{!embedUrl}" scrolling="true" width="100%" height="800"  />

</apex:page>

Step 2: Create Second Artifact

  • Select the button titled "New"
  • In the page presented, enter the label as "Launch Streem CallReview iFrame"
  • Enter the name as "Launch_Streem_ReviewCalls_iFrame" with included underscores
  • Enter the description as (or notes as you see fit) "Launches Streem Review Calls functions in an iFrame if added to the Leads page via Lightning App Builder"
  • Checkmark the box "Available for Lightning Experience [...]"
  • Add the following code, adjust variables to match your individual company needs
  • Set the API version to 48 and then press Save
  • Review the Visualforce settings and make sure your page exists.
    -Move on to Artifact 2 creation
<!-- Nab the Lead Details and assign to "l" (lowercase L)-->
<apex:page standardController="Lead">
<apex:variable value="{!Lead}" var="l" />

<!-- Create the Streem /streems URL-->
<apex:variable value="https://YOUR_COMPANY_HERE.streempro.app/streems?" var="embedUrl" />
<apex:variable value="{!embedUrl + '&refId=' + l.Id}" var="embedUrl" />
 
<!-- Pop the Streem /embed URL into an iframe -->
<apex:iframe id="streemlooks" src="{!embedUrl}" scrolling="true" width="100%" height="800"/>

</apex:page>

Step 3: Update Lightning App

  • In quick Search, look for "App Builder"
  • Open the Leads Lightning App and press Edit
  • Select the Tabs portion of the page.
  • Locate and click "Add New Tab"
  • Click the New Tab and change Label to Custom
  • Name the Tab "Start a Streem Call", press OK
  • Choose the new Tab in the Visual Interface
  • From the Left Bar, drag "Visualforce" from components to the new tab which should be blank
  • Select the Visualforce page for "Launch Streem NewCall iFrame"
  • Select your Iframe height - Minimum 800px
  • Remove the checkmark for "Include Label"

Step 4: Repeat

  • Repeat the above steps to add a Tab called "Review Previous Calls"
  • This time select Visualforce page "Launch Streem CallReview iFrame"
  • Press Save in the top right
  • Go and test your settings in the Leads tab.

Updated over 1 year ago