SET_WIDGET_URL doesn't work in calling extensions in HubSpot

[JKing58]

Hi,

I am trying to create a custom CTI panel using calling-extensions-sdk, but unfortunately I cannot figure out how to do the redirect to a different domain, where my PBX is running.
Here is my scenario:

1. I set an initial URL to a decision server. It retrieves the portal ID, makes the API request to get the URL.
2. I set ‘SET_WIDGET_URL’ with the new URL
3. I do the redirect to the new URL. It is very similar to the example above. The URLs are in format: company1.x.com, company2.x.com, company3.x.com and so on…

<script>
 let redirectUrl = "getInstance?hubspot_id=";
 const sizeInfo = {
 width: 400,
 height: 650,
 };

 const cti = new window.default({
 debugMode: true,
 eventHandlers: {
 onReady: ({ engagementId, portalId, userId } = {}) => {
 cti.initialized({
 engagementId,
 isLoggedIn: false,
 sizeInfo,
 });
 if (portalId) {
 fetch(redirectUrl + portalId)
 .then((response) => response.json())
 .then((json) => {
 console.log(json);
 cti.sendMessage({
 type: 'SET_WIDGET_URL',
 iFrameUrl: `https://${json.instance}`
 });
 window.location.assign(`https://${json.instance}/custom/ENT/hubspot/web/index.html`);
 });
 }
 },
 },
 });
</script>

In log, I am getting just these errors (I removed non-important sensitive data):

Thank you very much for help.

P.S: It works, when the initial URL is set to the same domain as the final domain, e.g. company1.x.com. The problem is that at the beginning I don’t know which domain should be set, because it is retrieved based on the portal ID.

Originally posted by @xvlcekp in #18 (comment)

[HMir]

---

@JKing58 wrote:

Hi,

I am trying to create a custom CTI panel using calling-extensions-sdk, but unfortunately I cannot figure out how to do the redirect to a different domain, where my PBX is running.
Here is my scenario:

1. I set an initial URL to a decision server. It retrieves the portal ID, makes the API request to get the URL.
2. I set ‘SET_WIDGET_URL’ with the new URL
3. I do the redirect to the new URL. It is very similar to the example above. The URLs are in format: company1.x.com, company2.x.com, company3.x.com and so on…

<script>
 let redirectUrl = "getInstance?hubspot_id=";
 const sizeInfo = {
 width: 400,
 height: 650,
 };

 const cti = new window.default({
 debugMode: true,
 eventHandlers: {
 onReady: ({ engagementId, portalId, userId } = {}) => {
 cti.initialized({
 engagementId,
 isLoggedIn: false,
 sizeInfo,
 });
 if (portalId) {
 fetch(redirectUrl + portalId)
 .then((response) => response.json())
 .then((json) => {
 console.log(json);
 cti.sendMessage({
 type: 'SET_WIDGET_URL',
 iFrameUrl: `https://${json.instance}`
 });
 window.location.assign(`https://${json.instance}/custom/ENT/hubspot/web/index.html`);
 });
 }
 },
 },
 });
</script>

In log, I am getting just these errors (I removed non-important sensitive data):

Thank you very much for help.

P.S: It works, when the initial URL is set to the same domain as the final domain, e.g. company1.x.com. The problem is that at the beginning I don’t know which domain should be set, because it is retrieved based on the portal ID.

Originally posted by @xvlcekp in #18 (comment)

---

The issue you’re encountering occurs because you are trying to set the widget URL and immediately redirect the page, which can cause a conflict since the redirection interrupts the process of setting the iframe URL. To resolve this, you should first set the widget URL using SET_WIDGET_URL and only perform the redirect afterward. This ensures the iframe URL is correctly updated before the page navigates away. Additionally, it’s a good idea to add a slight delay (using setTimeout) before the redirect happens, allowing enough time for the SET_WIDGET_URL request to be processed. By setting the URL first and then redirecting after a short delay, you ensure that both actions occur successfully without interfering with each other