Traditionally, TalkJS works by creating an iframe element on your website to our service located at app.talkjs.com . While the TalkJS domain won't be publicly visible to end users, it will appear in the network requests tab of browsers. Under some circumstances the availability app.talkjs.com domain may be undesirable. For example, corporate firewalls may accidentally consider TalkJS' solution a chat or instant messaging software, and for that reason block requests to *.talkjs.com 

If you're on the Enterprise plan, you can mask all network requests to TalkJS by routing all traffic through your own domain, such as messages.yourdomain.com . This way, you can white-label TalkJS and bypass rudimentary domain-based blocking for corporate firewalls.

 Note: Domain masking must be manually enabled by the TalkJS support team. If you'd like domain masking to be enabled for your account, get in touch.

Once domain masking has been enabled for your account, you will need to take a couple of steps on your side to proxy all network requests to TalkJS through your own subdomain.

The following guide uses Amazon CloudFront as an example to describe how to proxy all network requests to TalkJS through your own subdomain. However, Cloudfront is used here for illustration purposes only, and you can use any service that best fits your infrastructure.

Proxy network requests through your own subdomain using CloudFront

 1. Login to your CloudFront service dashboard and select 'Create distribution'.

Screen capture from part of a Cloudfront dashboard, with five buttons in a row. The button at the outer left is a circular reload arrow. Next to that are buttons with the text: 'Enable', 'Disable', 'Delete' and 'Create distribution'.

2. Change the origin settings to the following:

Screen capture of part of a Cloudfront dashboard.  In the section ‘Default cache behavior’, under ‘Path pattern’, the option ‘Default (*)’ is selected. Under ‘Compress objects automatically’, the option ‘No’ is selected.  In the section ‘Viewer’, under ‘Viewer protocol policy’, the option ‘HTTP and HTTPS’ is selected. Under ‘Allowed HTTP methods’, the option ‘GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE’ is selected. Under ‘Restrict viewer access’, the option ‘No’ is selected.  In the section ‘Cache key and origin requests’, the option ‘Legacy cache settings’ is selected. Under ‘Headers’, the option ‘Include the following headers’ is selected, with the further addition under ‘Add header’ of the custom headers: ‘Authorization’, ‘Accept-Encoding’, ‘Accept-Datetime’, Accept-Language’, ‘Accept-Charset’, and ‘Accept’. Under ‘Query strings, the option ‘All’ is selected. Under ‘Cookies’, the option ‘None’ is selected. Under ‘Object caching’ the option ‘Customize’ is selected, with both Minimum TTL, Maximum TTL and Default TTL all set to 0.   Nothing is selected in the optional ‘Response headers policy’.

 3. Change the default cache behaviour to allow additional HTTP methods, as follows:

An option to choose 'Allowed HTTP Methods', with a radio button on the selection of 'GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE'.

 4. Change the 'Cache and origin request settings' to use the legacy cache settings so caching can be disabled (required).

Under ‘Cache and origin request settings’, the option ‘Use legacy cache settings’ is selected. Under ‘Cache Based on Selected Request Headers’, the option ‘None (Improves Caching) is selected.

 5. Change the default object caching rules, cache TTL and forwarding rules to the following:

Under ‘Object Caching’, the option ‘Customize’ is selected. Both Minimum TTL, Maximum TTL and Default TTL are set to 0. For ‘Forward Cookies’, the option ‘All’ is selected. For ‘Query String Forwarding and Caching’, the option ‘Forward all, cache based on all’ is selected. For ‘Smooth Streaming’, the option ‘No’ is selected.

6. Modify the distribution settings to add use your own subdomain, you may also need to configure a custom SSL certificate for your subdomain, as documented in the Cloudfront guide to using alternate domain names and HTTPS

Screen capture with the header ‘Distribution Settings’. For ‘Price Class’, the option ‘Use All Edge Locations (Best Performance)’ is selected. For ‘AWS WAF Web ACL’, the option ‘None’ is selected. For ‘Alternate Domain Names (CNAMEs), the example text ‘messages.yourdomain.com’ is entered. You can enter your own subdomain name here. For ‘SSL Certificate’, the option ‘ Default CloudFront Certificate (*.cloudfront.net)’ is selected. For ‘Supported HTTP Versions’, the option ‘HTTP/2, HTTP1.1, HTTP1.0’ is selected.

You can enable logging, but be aware that sensitive personally identifying information may appear in the log data.

 7. In the SDK code snippet that loads TalkJS, replace https://cdn.talkjs.com/talk.js:

<script>
(function(t,a,l,k,j,s){
s=a.createElement('script');s.async=1;s.src="https://cdn.talkjs.com/talk.js";a.head.appendChild(s)
;k=t.Promise;t.Talk={v:3,ready:{then:function(f){if(k)return new k(function(r,e){l.push([f,r,e])});l
.push([f])},catch:function(){return k&&new k()},c:l}};})(window,document,[]);
</script>

 

with your own proxy subdomain, for example:

<script>
(function(t,a,l,k,j,s){
s=a.createElement('script');s.async=1;s.src="https://messages.yourdomain.com/__assets/cdn/talk.js";a.head.appendChild(s)
;k=t.Promise;t.Talk={v:3,ready:{then:function(f){if(k)return new k(function(r,e){l.push([f,r,e])});l
.push([f])},catch:function(){return k&&new k()},c:l}};})(window,document,[]);
</script>


 

Note: Pointing to the new subdomain can only be done using the SDK. That means that if you're use the TalkJS NPM package, to enable domain masking you'll need to change to using the snippet from the SDK instead.

Once you've enabled the distribution, the chat should load correctly. You should now see all requests being routed through your custom domain.


Do you have any questions, or are you running into issues? We're happy to help out. Get in touch.

You’ve successfully subscribed to TalkJS
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.