Advanced Example: Embedding an iframe in Salesforce using Visualforce

The most basic implementation of Streem as an Integration places Streem inside a simple iframe or as a popped out tab in a browser. For those looking to give Streem more of a “Single Pane of Glass'' feel, a more prescriptive implementation may be needed. Below are instructions for how to accomplish this in a Salesforce Lightning App.

Ensure you have spoken in advance to your Streem Account Manager. In order to embed Streem into an iframe in 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.

📘
Implementation Note:
You may need to adjust this example based on your unique configuration or due to Salesforce updates that have modified the components and systems referenced in this doc.

Prerequisites:

Integration ID:

Teams should discuss how Integration 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. In all places, Streem refers to these unique IDs as “Integration ID” / “integrationId”

allowList:

A conversation should happen with your Streem representative so they can collect the Fully Qualified Domain details for your implementation, including pertinent wildcards for subdomains et al (where the iFrame will be displayed). 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 can activate "Shared Call Logs" to enable team members to see calls across your entire team. This is accomplished via internal Jira tickets and may add delays if not captured early in the conversation. Streem Calls created by other users will be read-only.

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"
Click "New" at the top of the page list
On the new page form, enter "Connect with Streem" as the label
Enter the name as "Connect_with_Streem_iframe" with included underscores
Enter the description as "Loads Streem call functions in an iframe. Must be added to the Leads page via Lightning App Builder"
Check the box "Available for Lightning Experience ..."
Add the code below, adjust variables to match your individual company needs
Under the ‘Version Settings’ tab, set the API version to 48 and then press Save
Review the Visualforce settings and make sure your page exists.

<!-- Pull in the Lead Controller Variables and assign it to parameter "customer"-->
<apex:page standardController="Lead">
<apex:variable value="{!Lead}" var="customer" />

<!-- 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" var="embedUrl" />
<apex:variable value="{!embedUrl + '&integrationId=' + customer.Id + '&phone=' + customer.phone + '&name='  + customer.name}"  var="embedUrl" />
 
<!-- Pop the Streem /embed URL into an iframe -->
<apex:iframe id="streeminvite" src="{!embedUrl}" scrolling="false" width="100%" height="800"  />

</apex:page>

Step 2: Create Second Artifact

Note: Embedded SSO is required when implementing multiple iframes in a browser session. If not please skip this step and proceed to step 3.

Click "New" at the top of the page
On the new page form, enter "Streem Call History" as the label
Enter the name as "Streem_Call_History_iframe" with included underscores
Enter the description as "Loads recent Streem Calls in an iFrame which match the IntegrationID shared in the Parameters. Must be added to the Leads page via Lightning App Builder"
Check 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 parameter "customer"-->
<apex:page standardController="Lead">
<apex:variable value="{!Lead}" var="customer" />

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

</apex:page>

Step 3: Update Lightning App

In quick Search, look for "Lightning 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 "Connect with Streem", 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 "Connect with Streem"
Select your Iframe height - Minimum 800px
Remove the checkmark for "Include Label"

Step 4: Repeat

Note: Embedded SSO is required when implementing multiple iframes in a browser session. If not please skip this step and proceed to step 5.

Repeat the above steps to add a Tab called "Streem Call History"
This time select Visualforce page "Streem Call History"
Press Save in the top right

Step 5: Test

Go and test your settings in the Leads tab.