Service portal header to open a window

Are Kaveri
Tera Contributor

‎09-15-2024 07:34 AM

Hi everyone,

 

 

I am working for a portal.

 

we have a portal call esc and we have given a menu on header call Chat Support.

 

for this Chat Support header we are working for the below part .

on click of the Chat Support it should open a window.

i have tried by below code :

html :

  <li ng-if="::(data.connect_support_queue_id && !isAgentChatConfigured)" role="presentation"><a href ng-click="openPopUp()" role="menuitem">${Live Chat}</a></li>

Client controller

$scope.openPopUp = function() {
		var url = "$chat_support.do?queueID=" + $scope.data.connect_support_queue_id;
		var popup = window.open (url, "popup", "width=900, height=600");
	};

 

 

In my client controller I have used window.open() instead of angular services.

 

i am now confused which angular service I can use instead of window object???

 

spModal?

$location ?

$uibmodal?

 

 

if I used spModal, how to add url in my code???

spModal.open({
title: 'Displaying widget '
}).then(function(){
console.log('widget dismissed');
});
 
not understanding how to add my url here??
 
please help me if any idea???

 

0 Helpfuls
  • 560 Views
3 REPLIES 3

Ct111
Giga Sage

‎09-15-2024 07:54 AM

Read below article here similar thing has been attempted , it will be good reference point (under paragraph : Toggle chat client with Agent Chat Configuration)

 

Toggling Virtual Agent chat client (using Agent Ch... - ServiceNow Community

 

I hope this information helps.

0 Helpfuls

debendudas
Mega Sage

‎09-15-2024 08:07 AM

Hi @Are Kaveri ,

If you want to open a different URL in spModal you can create a widget and call it from spModal and in that widget you can use an iframe to open a different URL.

 

Iframe Widget (id:  iframe_widget)

<div>
<!-- Change width and height and URL based on the requirement -->
<iframe style="width: 100%; height: 500px;" src="/esc?id=emp_taxonomy_topic&topic_id=676497a7c3053010069aec4b7d40dd89" />
</div>

 

Main Widget - HTML:

<div>
  <button class="btn btn-primary" ng-click="c.click()">Open Popup</button>
</div>

 

Main Widget - Client script

api.controller = function(spModal) {
	/* widget controller */
	var c = this;
	c.click = function() {
		spModal.open({
			title: 'spModal Title',
			widget: "	iframe_widget",
			size: "lg"
		});
	};
};

 

Output:

debendudas_0-1726412793721.png

 

If this solution helps you then, mark it as accepted solution ‌‌✔️ and give thumbs up 👍! 

0 Helpfuls

Are Kaveri
Tera Contributor
In response to debendudas

‎09-15-2024 10:05 PM

thanks for the response debendudas, 

 

I am having issue with the URL.

var url = "$chat_support.do?queueID=" + $scope.data.connect_support_queue_id;

I have some customisation in URL.

I have some server code how to invoke my URL ?

The below is my HTML code

html :

  <li ng-if="::(data.connect_support_queue_id && !isAgentChatConfigured)" role="presentation"><a href ng-click="openPopUp()" role="menuitem">${Live Chat}</a></li>

Client controller

$scope.openPopUp = function() {
		var url = "$chat_support.do?queueID=" + $scope.data.connect_support_queue_id;
		var popup = window.open (url, "popup", "width=900, height=600");
	};

 

Server code :

// Defines the support queue ID that will be linked to by the Live Chat link in header
data.connect_support_queue_id = $sp.getValue('sp_chat_queue');

 

 

Please help me how to link my server code in iframe widget?

 

 

 

0 Helpfuls