Domain masking for TalkJS

Traditionally, TalkJS works by creating an iFrame element on customers website to our service located at app.talkjs.com . While this domain won't be publicly visible to end users, it will appear in the network requests tab of browsers. Under some circumstances this may be undesirable such as if you want to mark using TalkJS, or if a large portion of your users use corporate & enterprise web access firewalls which may accidently consider TalkJS' solution a "Chat / IM Software" such as Facebook messenger, and therefore block requests to *.talkjs.com 

On our Enterprise plan, we allow customers to mask all network requests to TalkJS by routing all traffic through your own domain e.g. messages.yourdomain.com , and therefore further white label TalkJS and bypass rudimentary domain based blocking for corporate firewalls.

 Note: This feature requires manual enablement by our support team, please reach out to your dedicated account manager and ask for this feature to be enabled for your account.

Once this feature has been enabled for your account you will need follow the steps below to proxy all network requests to TalkJS through your own subdomain.

 1. Navigate to the CloudFront service dashboard and click on 'Create Distribution'

 2. Change the origin settings to the following:

 3. Change the default cache behaviour to allow additional HTTP methods, as shown in the screenshot below

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

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

 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 here. 

 Logging can be enabled should you want it, although be aware of potentially sensitive PII appearing in the log data.

 7. Change the SDK snippet to point to the new proxy subdomain e.g swap the text highlighted in bold:

<script>
(function(t,a,l,k,j,s){
s=a.createElement('script');s.async=1;s.src="<strong>https://cdn.talkjs.com/talk.js</strong>";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 this:

<script>
(function(t,a,l,k,j,s){
s=a.createElement('script');s.async=1;s.src="<strong>https://messages.yourdomain.com/__assets/cdn/talk.js</strong>";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: If you use the TalkJS NPM package, you will need to change to using the snippet instead.

Once you've enabled the distribution the chat should load correctly and you should now see all requests being routed through the custom domain that you've configured CloudFront for. If you run in to any issues, please reach out to support for further guidance.