Embedding Streem into a CRM
This page refers to the legacy version of Embed
For developer documentation on our updated version please visit our latest Embed Docs.
Ready to upgrade to the latest version of Embed? please contact your customer success manager or our support team.
We work with contact center and desktop CRM users who frequently want to use the Streem service from within their existing tools, and not maintain “yet another login” or run “yet another tab”. They also want to ensure that little-to-no manual intervention is required to initiate a Streem session. We have a solution for that!
- Streem has crafted an
iframefriendly 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 real estate is respected.
- Streem Invite parameters can collect form data for call invitations, limiting manual entry errors.
- Sending an Invitation places the Agent in a 'waiting for client' mode, and auto answers when the customer accepts and begins their session
- End of call redirects can push your agent to a specific url when the Streem call completes, allowing your workflows to be supported.
- Calls (based on reference id) can be displayed regardless of the Agent who participated. Data is not restricted in cases of team support, illness coverage, or escalation to higher tiers of team expertise.
PLEASE NOTE:
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 Embedded Streem inside a mobile workflow, we would suggest instead utilizing our purpose built Mobile Expert applications
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.
Creating the Embeddable link: Launching a Streem session
- 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/embedvia URL parameters, enabling pre-population of data that you already have (e.g., phone, Session ID, Customer Name, etc.).
Example Embedded Streem Page
Parameters
The following table shows the supported URL parameters, and what they mean:
| Parameter | Description |
|---|---|
| name | The display name of the person being Invited to a Streem call. |
| phone | Phone number to receive invite text sms. This should not include the country code, as that is specified with callingCode below. |
| refId | Reference Identifier – Typically the unique Session ID from the platform opening this page. It is suggested that this be a machine generated unique identifier, as this value can be used on the REST API to retrieve data about the call. |
| source | Not shown in the invite, but carried through to the Streem Session. Use the source given to you by your account manager |
| callingCode | Country code prefix for the phone number (defaults to +1). For example, use +44 for UK phone numbers. |
| redirect | Provide a URL for where the Agent will be redirected to after the call. If not provided, a "thank you" page will load, with no further action available. For example: redirect=https%3A%2F%2Fwww.google.com will load google.com into the iframe after the call.You can also provide the value call, which will redirect the Agent to the Call Details page after the Streem has ended. |
- Note: Should you wish to embed Streem as an iframe, make sure that your Streem representative adds your domain (the one that will call the Streem client) into its list of approved domains.
- Try it: 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&refId=abc123&source=ACME&redirect=call"
width="500" height="500" title="Streem Invite">
</iframe>
</body>
</html>
Embedded /streems Link: Getting Call Details
/streems Link: Getting Call DetailsYou can load an embedded page that simply shows a filtered view of the Streem Call Log using the /streems page. This is useful, for example, when viewing an historical call record within your CRM, in order to show the Streem details that occurred during that call. Pass the same refId that was provided to the /embed page above, but use the /streems URL path.
For example: (https://streemdemo.streempro.app/streems?refId=abc1234) will load a page like this:
- If a Reference ID was used for multiple Streem calls, a list of each Streem call will be shown. If you are listed as the responsible "Agent" who made the call, you’ll be able to make modifications to the notes and artifacts in the call log.
Agents who did not perform the call are given read only access to protect notes. - 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}&refId={!Lead.Id}&source=SFDC
-
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 within a section the page as "part of salesforce"
-
Test and validate your results.
-
Repeat these steps for the embedded
/streemsendpoint to select where long term call logs can be seen. -
In this example, the Lead ID is used for the Reference 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
iframelead page element.
Power User play
Use the post call
redirectparameter, and point it at your streems call log! This will drop your Agent onto the call log that matches the provided Reference ID and allow them access to the data immediately.Note that the
redirectvalue must be URL-encoded, as shown below (e.g.%2Freplaced the/in the URL). You can use a website like to encode: https://www.urlencoder.orgExample Embed Link with Redirect to
/streems:
https://yourcompanycodehere.streempro.app/embed?name={!Lead.FirstName}&phone={!Lead.MobilePhone}&refId={!Lead.Id}&source=SFDC&redirect=http%3A%2F%2Fyourcompanycodehere.streempro.app%2Fstreems%3FrefId%3D{!Lead.Id}
Troubleshooting
- 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
Updated over 1 year ago