Actioncable production settings when using heroku + custom domain

So I built a website and pushed it to heroku production example.herokuapp.com and bought a domain to reroute example.com to show whatever is on example.herokuapp.com.
This all works great, except when it comes to actioncable.

This is my cable.js code:

//= require action_cable
//= require_self
//= require_tree ./channels

(function() {
  this.App || (this.App = {});

  var queryString = window.location.search.slice(1);
  var params = {};

  var arr = queryString.split("&");
  for(var key in arr){
    var arr2 = arr[key].split("=");
    params[arr2[0]] = arr2[1];
  }

  App.cable = ActionCable.createConsumer("wss://example.herokuapp.com/cable?token=" + params["token"]);
}).call(this);

I've tired changing the wss://example.herokuapp.com to wss://example.com, but that still doesn't fix the issue. The website is requiring it to be wss://example.herokuapp.com for some reason.

Any idea how to make this work?

Or do I need to just migrate to Digital ocean in case it's a DNS problem?

I'm doing a CNAME for example.com => example.herokuapp.com for my DNS settings.