Embedding Streem into a CRM

Desktop CRM users need a way to incorporate Streem services into their existing CRM system (as opposed to having a separate login or browser window). These same users want a simple user interface to initiate a Streem call. We have a solution for that!

• Streem has crafted an iframe friendly Streem Embed solution, which enables the joining of CRM data and key elements of the Streem service, accessible by calling a URI with parameters. The implementation of this solution is often completed in under 30 minutes. After implementation of this simple method of integration, most if not all of your workflow requirements are met. Using Streem in this manner does not require an API key or use of the API.

Streem Embed is designed to help ensure that desktop CRM users stay within your CRM, never needing to leave your single source of truth:

Features:

• A headerless interface ensures that valuable screen estate is respected.
• Streem invite parameters can be used to populate form data for call invitations, limiting manual entry errors.
• Sending an invitation places the Expert in a 'waiting for customer' mode, and auto answers when the customer accepts and begins their session.
• End of call redirects can direct the Expert to a specific URL when the Streem call completes, allowing your workflows to be supported.
• Streem Calls (based on Integration ID) can be displayed regardless of the Expert who participated. Data is not restricted in cases of team support, illness coverage, or escalation to higher tiers of team expertise.

Streem Embed is designed for desktop web applications (mobile not supported)

Streem Embed functionality was created for use inside desktop-embedded iframes. While functionality may exist on mobile devices due to the similarity of HTML handling, mobile devices include use of gestures and browser limitations. For organizations who use Streem Embed inside a mobile workflow, we recommend utilizing our purpose-built mobile Expert applications.

Pre-requisites:

Embedded SSO Token Generation:
Embedded SSO is designed to allow clients to transparently log in users who are embedded inside another tool, like a CRM or custom data management integration. For more information on how to configure Embedded SSO, please refer to our Embedded SSO Requirements.

🚧

Username and Password Authentication

Username and Password authentication for more than one instance of Embed in a browser session is not supported.

integrationId:
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 IDs” / “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 (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 will activate our "Shared Call Logs" feature 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.

Creating the Embeddable link: Launching a Streem call

• To embed Streem into your Agent Tools / CRM, the Streem Web App is accessed using a specific URL structure, to a path called /embed. Customer invitation details are passed from your CRM to /embed via URL query parameters, enabling pre-population of data that you may already have (e.g., phone, Integration ID, customer name, etc.).

Example Embedded Streem Page

URL Parameters

The following table shows the supported URL query parameters and what they mean:

📘

Implementation Note:

Special Characters - URL reserved characters ( ! * ' ( ) ; : @ & = + $ , / ? % # [ ] ) in values provided to query parameters can be passed but MUST be HTTP encoded before inclusion. You can use a web tool to encode these values for you: https://www.urlencoder.org

Try it an HTML tool

Go to this link (HTML online editing tool): https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe

Use something akin to this code:

<!DOCTYPE html>

<html>

<body>

<h1>The iframe element</h1>

<iframe src="https://yourcompanynamehere.streempro.app/embed?name=Joe%20Customer
&phone=5035551212&integrationId=abc123&redirect=call" 
width="1000" height="500" title="Streem Invite">

</iframe>

</body>

</html>

Embedded /streems Link: Getting Call Details

📘

Implementation Note:

Embedded SSO is required when implementing multiple iframes per browser session.

You can load an embedded page that shows a filtered view of the Streem Call Log using the /streems page. This is useful, for example, when viewing a historical call record within your CRM, in order to show the Streem Call details that occurred during that call. Pass the same integrationId value and query parameter that was provided to the /embed page above, but use the /streems URL path.

For example: https://streemdemo.streempro.app/streems?integrationId=00Q3u000012EVS will load a page like this:

• If an Integration ID was used for multiple Streem Calls, a list of each Streem Call will be shown. If you are listed as the Expert who made the call, you’ll be able to make modifications to the notes and artifacts in the Call Log. Experts who did not perform the call are given read-only access.
• Share links are disabled to protect notes.

Beginner Example: Salesforce Integration as a Link or Button

Streem can be embedded in many environments and tools, but we will use Salesforce as an example of a fast and simple implementation

As a Salesforce Admin:

• Navigate to the gear icon, select ‘Setup’, then ‘objects and fields',
• Select the Object where you would like the Streem service to be embedded. eg Account details page or Leads
• Create and save a "Detail Page button" (or link to load in a new tab)
• Enter text of your link and save

URL example for inserting to Leads pages

https://yourcompanycodehere.streempro.app/embed?name={!Lead.FirstName}&phone={!Lead.MobilePhone}&integrationId={!Lead.Id}

• After saving, Salesforce will remind you to add the button to your page layout
• Navigate to page layout and insert the button where you see fit as a standalone element, or an action to load Streem Embed within a section the page as "part of Salesforce"
• Test and validate your results
• Repeat these steps for the embedded /streems endpoint to select where call logs can be viewed. Note: if you are not implementing Embedded SSO please skip this step.
• In this example, the Lead ID is used for the Integration ID so that all Streem Calls associated with this lead would share the same ID and be loaded (with dates and details) into the resulting iframe lead page element

📘

Power User play

Use the post-call redirect parameter and point it at your Streem Call Log! This will drop your Expert onto the Call Log that matches the provided Integration ID and allow them access to the data immediately.

Note that the query parameter value must be URL-encoded, as shown below (e.g. %2F replaced the / in the URL). You can use a web tool to encode these values for you: https://www.urlencoder.org

Example Embed Link with redirect to /streems:

https://yourcompanycodehere.streempro.app/embed?name={!Lead.FirstName}&phone={!Lead.MobilePhone}&integrationId={!Lead.Id}&redirect=http%3A%2F%2Fyourcompanycodehere.streempro.app%2Fstreems%3FintegrationId%3D{!Lead.Id}

Troubleshooting

When visiting the /streems path and the below message is displayed:

• Implementation error: developer did not put an integrationId or refId as a param on /streems
• Shared call logs are not enabled. Ask your Streem representative to enable them.

Audio fails inside iframe but works when accessed directly:

• Modern browsers use Feature-Policy header values in the HTTP response. These dictate whether to allow, block, or prompt when deciding to allow access to feature APIs (Camera APIs, Microphone APIs) for origins and sources. When using an iframe, you may need to explicitly set this value.

See these docs for details:

• https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy#specifying_your_policy
  
• https://developers.google.com/web/updates/2018/06/feature-policy