Go to ortto.com
Home Settings Talk messenger and inbox Talk messenger

Talk messenger

The Talk messenger page is where you manage the Talk messenger widget, including turning it off and on.

The messenger widget is the widget for Ortto’s Talk feature which enables live conversations with your customers on your website. Enabling the widget widget allows your website visitors and customers to contact your organization to receive customer support or ask questions of your sales team.

Conversations initiated by a customer or visitor using the talk widget are managed by agents using the Talk inbox.

IMPORTANT: The web page on which you want the talk widget to appear must have your Ortto tracking code installed.

If you website enforces a content security policy (CSP), you will need to configure it to support the Talk messenger widget.

This page describes the Talk messenger widget which captures inbound conversations (initiated by a contact/visitor). You can build upon the Talk messenger widget by creating a conversation capture widget, which uses the Talk messenger widget to initiate conversations with contacts or visitors to your site (outbound conversations), such as to announce new products or offer help to site visitors. Learn more about initiating conversations in Conversation capture widget.

To access the Talk messenger widget settings, navigate to Settings  Talk widget. You’ll be taken to the widget manager, where you can enable (toggle ON) or disable (toggle OFF) the widget on any page that has the tracking code installed.

NOTE: If you want to have the widget turned ON, but not shown on every page which has the tracking code installed, add disableTalk: true to the initialize function of the relevant page’s tracking code. Learn more under Hide the Talk widget when enabled at Tracking code

Click Edit to configure how the widget looks, how to handle unidentified visitors, and set response times.

Style

The chat widget includes a homepage, which is what visitors see when they start a conversation. Here you can customize the look of the widget homepage to suit your branding.

Add a logo to represent your brand, and set the widget colors and font family.

Preview your agent’s photos and add a bot photo for auto-reply messages.

You can customize the icon that represents the widget when it is minimized on your webpage. By default the widget sits in the bottom-right corner of your webpage, but you can change this using the position and margin options.

Home

You can personalize your widget header using merge tags to greet known users by name (e.g. by adding the First name person field merge tag).

The Widgets section lists the components of the chat widget, with Conversations added by default (edit this section under the Conversations tab). Click Add widget to add a Quick links section and add relevant links to key areas of your website, such as "Book a demo" or "Shipping and returns".

Example Talk widget homepage settings

Conversations

Unidentified visitors

Configure the requirements for identifying unidentified visitors.

When an unidentified visitor starts a conversation, by default and at minimum they will be required to enter an email address. You can also specify that the visitor also enters their first and last names.

NOTE: Where a conversation is initiated by a conversation widget, an unidentified visitor can reply to the widget-initiated message without needing to provide their details. However, if the visitor wishes to continue the conversation, then they will need to provide at least their email address (depends on your settings for unidentified visitors).

An unidentified visitor will become a CDP contact when they have entered their details (email address at minimum) and begin a conversation.

Contacts who are known, such as where they have logged in to your website and the tracking code can recognize them by their email address, will have their name displayed in the chat widget header. A logged-in/known contact also will not have to provide any identifying information, such as an email address, when they initiate a conversation.

Example contact’s name displayed in the widget header

Response times

Let visitors know about your expected response times for when you are online (active) and away. The online and away response estimates will appear in the talk widget homepage and in conversation auto-replies (depending on your away/online status).

Content security policy (CSP) configuration for Talk

If your website enforces a content security policy (CSP), you will need to configure it support the Talk messenger widget.

How you modify your CSP depends on its specification level (1, 2 or 3) and your website’s configuration.

IMPORTANT: Use caution when making changes to your CSP to avoid issues affecting your website’s JavaScript.

As each website’s CSP is configured differently, check with your development team to ensure your CSP is configured appropriately to support Talk. You can also contact Ortto’s Support team if you need assistance

Level 3 CSP

Where you have a level 3 (strict) CSP, you need to configure the policy directives to include a nonce directive to "whitelist" your inline script element, similar to the following:

javascript
 
object-src 'none'; script-src 'nonce-{random}' 'unsafe-inline' 'strict-dynamic' https: http:; base-uri 'none'; report-uri https://your-log-service.com/csp-report

Level 1 or 2 CSP

Where your CSP is a level 1 or 2, you can enable Talk by allowing JavaScript to communicate over web sockets with the Talk API by modifying your CSP header to include a connect source.

Talk uses Twilio and the twilio-video.js library to facilitate audio calls and screen sharing, so you need to tell the CSP to allow Twilio’s servers. Per Twilio’s twilio-video.js documentation the mediastream: protocol is required at your media source.

The following are policies suitable for a level 1 or 2 CSP to support Talk.

Because the Talk API endpoint is region-specific, you need to match it to your instance region (the instance where your are running Talk). We have created copyable policies for each region: US (default), EU and AU. Simply expand the section relevant to you and hover over the code to access the copy icon.

US (default)

 
font-src https://m.autopilotapp.com/ https://fonts.gstatic.com/;
img-src https://m.autopilotapp.com/ https://*.gyazo.com https://*.ytimg.com;
media-src https://cdn2l.ink/ mediastream:;
script-src https://cdn2l.ink/ 'unsafe-inline' blob:;
//If using a custom tracking domain, replace https://cdn2l.ink with your domain
style-src 'self' https://capture-api.ap3prod.com/ https://fonts.googleapis.com/ 'unsafe-inline';
frame-src https://*.youtube.com https://*.spotify.com;
connect-src https://capture-api.ap3prod.com/ https://talk-api.autopilotapp.com/ wss://talk-api.autopilotapp.com/ https://*.youtube.com wss://global.vss.twilio.com/ wss://sdkgw.us1.twilio.com/

EU

 
font-src https://m.eu.autopilotapp.com/ https://fonts.gstatic.com/;
img-src https://m.eu.autopilotapp.com/ https://*.gyazo.com https://*.ytimg.com;
media-src https://cdn2l.ink/ mediastream:;
script-src https://cdn2l.ink/ 'unsafe-inline' blob:;
//If using a custom tracking domain, replace https://cdn2l.ink with your domain
style-src 'self' https://capture-api.ap3prod.com/ https://fonts.googleapis.com/ 'unsafe-inline';
frame-src https://*.youtube.com https://*.spotify.com;
connect-src https://capture-api.ap3prod.com/ https://talk-api.eu.autopilotapp.com/ wss://talk-api.eu.autopilotapp.com/ wss://global.vss.twilio.com/ wss://sdkgw.us1.twilio.com/

AU

 
font-src https://m.au.autopilotapp.com/ https://fonts.gstatic.com/;
img-src https://m.au.autopilotapp.com/ https://*.gyazo.com https://*.ytimg.com;
media-src https://cdn2l.ink/ mediastream:;
script-src https://cdn2l.ink/ 'unsafe-inline' blob:;
//If using a custom tracking domain, replace https://cdn2l.ink with your domain
style-src 'self' https://capture-api.ap3prod.com/ https://fonts.googleapis.com/ 'unsafe-inline';
frame-src https://*.youtube.com https://*.spotify.com;
connect-src https://capture-api.ap3prod.com/ https://talk-api.au.autopilotapp.com/ wss://talk-api.au.autopilotapp.com/ wss://global.vss.twilio.com/ wss://sdkgw.us1.twilio.com/

NOTE:

Level 1 or 2 CSP for custom tracking domains

The following are policy templates for if you are using a custom tracking domain. The callouts in the templates identify the 4 areas (media-src, script-src, style-src and connect-src) where you need to add your custom tracking domain to the policy.

Because the Talk API endpoint is region-specific, you need to match it to your instance region (the instance where your are running Talk). We have created copyable policies for each region: US (default), EU and AU. Simply expand the section relevant to you and hover over the code to access the copy icon.

US (default)

 
font-src https://m.autopilotapp.com/ https://fonts.gstatic.com/;
img-src https://m.autopilotapp.com/ https://*.gyazo.com https://*.ytimg.com;
media-src <customdomain> mediastream:; 
script-src <customdomain> 'unsafe-inline' blob:; 
style-src 'self' https://<customdomain> https://fonts.googleapis.com/ 'unsafe-inline'; 
frame-src https://*.youtube.com https://*.spotify.com;
connect-src https://<customdomain> https://talk-api.autopilotapp.com/ wss://talk-api.autopilotapp.com/ https://*.youtube.com wss://global.vss.twilio.com/ wss://sdkgw.us1.twilio.com/

EU

 
font-src https://m.eu.autopilotapp.com/ https://fonts.gstatic.com/;
img-src https://m.eu.autopilotapp.com/ https://*.gyazo.com https://*.ytimg.com;
media-src <customdomain> mediastream:; 
script-src <customdomain> 'unsafe-inline' blob:; 
style-src 'self' https://<customdomain> https://fonts.googleapis.com/ 'unsafe-inline'; 
frame-src https://*.youtube.com https://*.spotify.com;
connect-src https://<customdomain> https://talk-api.eu.autopilotapp.com/ wss://talk-api.eu.autopilotapp.com/ wss://global.vss.twilio.com/ wss://sdkgw.us1.twilio.com/

AU

 
font-src https://m.au.autopilotapp.com/ https://fonts.gstatic.com/;
img-src https://m.au.autopilotapp.com/ https://*.gyazo.com https://*.ytimg.com;
media-src <customdomain> mediastream:; 
script-src <customdomain> 'unsafe-inline' blob:; 
style-src 'self' https://<customdomain> https://fonts.googleapis.com/ 'unsafe-inline'; 
frame-src https://*.youtube.com https://*.spotify.com;
connect-src https://<customdomain> https://talk-api.au.autopilotapp.com/ wss://talk-api.au.autopilotapp.com/ wss://global.vss.twilio.com/ wss://sdkgw.us1.twilio.com/