Hi All ,
I want to embed an external Javascript SDK in the page and also capture the data triggered with the external events and pass the data to the bubble application by triggering event in the plugin or updating the state of the plugin. If I embed this in initialize, I am unable to capture the events getting triggered from external javascript. If I embed this in html header , I don’t have access to instance, context or properties ?? Please help
For Eg. this is an external javascript from CDN where the following listeners are listed.
I asssume javascript actions are for calling a javasctipt function . These are the events which gets triggered by external javascript , as soon as the bubble page opens in another application where the page is embedded.
so we have to listen to these events and get the data into bubble application . If put the script reference in the header , i don’t have access to instance object of the plugin like the way we have access to instance object in the initialize function of plugin
for eg .
ZOHO.embeddedApp.on(“PageLoad”,function(data){
instance.publishState(pageload_data,data); //*** this cannot be done in header , I’m assuming**//
})
@Jici Im creating a plugin . Not sure where i need to add the external event listeners eg. ZOHO.embeddedApp.on which sends data object . Objective is to get the data object and publish to state . I already put the below code in initialize section of the plugin , but its not working. I have inserted the following code in the initialize but its not working
function(instance, context) {
/*
* initializing the widget.
*/
ZOHO.embeddedApp.init();
alert("hello world inside plugin");
/*
* Subscribe to the EmbeddedApp onPageLoad event before initializing
*/
instance.publishState(pageload_data,"loading.......");
alert("published page load state");
ZOHO.embeddedApp.on("PageLoad",function(data)
{
instance.publishState(pageload_data,JSON.stringify(data));
instance.triggerEvent("pageload");
instance.publishState(pageload_data,"pageload fired");
alert("hello world inside the event");
console.log(data);
//Custom Bussiness logic goes here
})
ZOHO.embeddedApp.on("Dial",function(data){
instance.publishState(dial_data,JSON.stringify(data));
instance.triggerEvent("dial");
console.log("Number Dialed");
})
}
Event listeners should be added in the update function
You will probably replace console.log or alert by
instance.publishState or instance.triggerEvent
The header will have the script tag with the link to the js file.
Thanks for your suggestion . But my doubt was that when there is no field getting updated, how will the update code fire i.e subscribe to the event listeners ? .
The listeners have to be subscribed when the page containing this plugin is opened within an external application [zoho crm]. Im getting little confused here
It doesn’t change for the listerner. Maybe it will work even in initialized too. But in most case you should set that in update function.
I just don’t know how the auth for the user work. The documentation is not really well built around that.
@Jici . Since this is an embedded app within another application [Zoho CRM] , it has access to all the api’s of the zoho javascript SDK. I don’t need to separately authorise. This works in a normal HTML page perfectly where as soon as the HTML page is opened in Zoho CRM, the pageload event fires and gets the data object. Somehow , when I am using the same API [event listener] in the initialize section , its not getting subscribed to [based on console.log] .
Can I use jquery [ $(document).ready(function()] in the plugin to update the plugin states or may be a hidden element whose value can be accessed ?
Was wondering the same logic applies to google maps widget , when a user clicks on the map, the click event fires[gmaps sdk] the position of the lat/long is captured in the bubble . How might this be working?
I’m not very familiar with this kind of script. Did you try to set that in update function instead? (It will run normally after the element is visible on page load… Also, be sure to have it visible Sometimes user think a plugin run script when not visible, but it’s not the case.)
@zbooks.ext I’m not sure if you moved on or figured out the solution. But in case anyone travels down this thread in the future… I was working on a plugin and wanted to achieve this functionality and yes it is possible. If you track the instance as a variable on the window/document you can access the methods on the instance object.
Would you mind elaborating on this process. I’m still a bit new to the bubble interface and was basically looking for the exact same functionality. I am using frontapp to do this and the listening events are documented here: Front.contextUpdates
Thanks for steering me the right direction.
– Update –
I believe I can use something like the following, but not sure where to put this.
let noConversationSelected;
let selectedConversation;
let multipleConversationsSelected;
Front.contextUpdates.subscribe(context => {
switch (context.type) {
case 'noConversation':
noConversationSelected = true;
selectedConversation = null;
multipleConversationsSelected = null;
break;
case 'singleConversation':
noConversationSelected = false;
selectedConversation = context.conversation;
multipleConversationsSelected = null;
break;
case 'multiConversations':
noConversationSelected = false;
selectedConversation = null;
multipleConversationsSelected = context.conversations;
break;
default:
console.error(`Unsupported context type: ${context.type}`);
break;
}
});
Sometimes user think a plugin run script when not visible, but it’s not the case.)