Go to ortto.com
Home Settings Talk messenger Talk messenger

Talk messenger

Overview

The Talk messenger widget is Ortto’s Talk feature that lets your website visitors chat live with your team. By enabling this widget, you allow customers to reach out for support or contact your sales team directly.

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

Accessing talk messenger

To access the talk messenger page, go to Settings > Talk Messenger.

Managing talk messenger

The talk messenger page allows users to:

Saving changes

Remember to click Save in the top right corner to apply your changes.

Set up talk messenger

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.

Accessing settings

  • Navigate to Settings > Talk messenger > Edit.

Enable or disable the widget

  • Navigate to Settings > Talk messenger.
    • Toggle the Talk widget ON or OFF for any page with the tracking code installed.

TIP: To keep the widget ON but hide it on specific pages with the tracking code installed, include disableTalk: true in the initialize function of those pages' tracking code.

Learn more under Hide the Talk widget when enabled at Tracking code

Learn more about initiating conversations in Conversation capture widget.

Style

Personalize the appearance of your chat widget to match your brand:

  • Homepage design: Customize the initial view visitors see when they start a conversation.
  • Branding elements: Add your logo, choose widget colors, and select a font style that reflects your brand identity.
  • Agent and bot images: Preview and set photos for agents and bots to enhance user interaction.
  • Widget icon placement: Adjust the widget's position on your webpage. By default, it appears in the bottom-right corner, but you can change this using position and margin settings.

Content

Make your widget more personal and useful with these tips:

  • Personalized greetings: Use merge tags to greet known users by name, like adding the First name merge tag.
  • Adding widgets: In the Widgets section, you'll find default components like Conversations (editable under the Settings tab).
    • Click Add widget to include Quick links, where you can link to important areas of your website such as Book a demo or Shipping and returns.
Example Talk widget homepage settings.

Settings

Unidentified visitors

Tailor how unidentified visitors are handled with these settings.

  • Requirements: By default, unidentified visitors starting a conversation must provide at least an email address. You can also request their first and last names.
  • Using conversation widgets: If a conversation is initiated by a widget, unidentified visitors can respond without entering details initially. However, continuing the conversation may require at least an email address, depending on your settings.
  • Becoming a CDP contact: An unidentified visitor becomes a CDP contact upon providing their email address and starting a conversation.
  • Known contacts: Logged-in visitors recognized by their email address won't need to provide further details when initiating a conversation. Their name will be displayed in the chat widget header.
Example contact’s name displayed in the widget header.

Response times

Inform visitors about your availability with these steps:

  • Office hours: Define your default working hours to indicate when you're online and available to respond promptly.
  • Response estimates: These estimates are displayed on the talk widget homepage and in auto-replies during your active and away periods.

Adjust your settings under Settings > Inbox > Office hours & response times.

Content security policy (CSP) configuration for Talk

To integrate the Talk messenger widget with your website's content security policy (CSP), follow these guidelines:

  • CSP requirements: Ensure your CSP supports the Talk messenger widget. The modifications needed depend on your CSP's specification level (1, 2, or 3) and your website's configuration.

Level 3 CSP

For strict CSPs, configure directives to include a nonce directive to whitelist inline script elements. Example:

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

Allow JavaScript to communicate via web sockets with the Talk API. Customize policies based on your region:

  • US (default), EU, AU regions provided. Replace <customdomain> with your actual domain if using a custom tracking domain.
  • Custom Tracking Domains: If using a custom tracking domain, adapt policies accordingly for each region.

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.

IMPORTANT: Adjusting your CSP requires caution to avoid issues with your website's JavaScript functionality. Consult your development team for proper configuration or contact Ortto’s Support team for assistance.

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/