Mobile App and loading of Intercom

Mobile App and loading of Intercom

  

Hi, tried to search the forums for this, but I couldn't find anything applicable so I'm trying this instead.

Being a novice in Outsystems, but coming friom  a web dev background and trying to develop a sample Mobile App, I'm trying to integrate a common external service for customer communication called Intercom. The javascript tag to include in the <head> tag is a simple one:

<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/djg9gjva';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()</script>

Then somewhere in a common block, I would like to include the following initialization code:

window.Intercom("boot", {
  app_id: "XXXXXXX"
});

The initialization I could probablt put in the OnReady action on the Layout block, right?

But where should I put the actual tag for the Intercom code? Adding it to the same OnReady event (after removing the script tag) just gives me a Lint error ("Function declarations should not be placed in blocks. Use a function expression or move the statement to the top of the outer function").

Adding it as a script under the Scripts folder gives me the same error.

Any pointers?


Thanks,

Niklas//

The JavaScript code you want to place on the <head> is actually an anonymous function definition and call (notice the starting (function(){ and the ending })() ).

Are you sure you want that as a <script> tag in the <head> section? I'm not really sure where you might want to define and call that, maybe OnInitialize? or maybe simply remove the function definition+call bits (in bold, above) and just have the contents directly on a script under the Scripts folder??

Hi Jorge, tried your suggestions and removed the self executing anonymous function and stuffed it in a script under the Scripts folder. The problem is that I can't seem to get it to execute there. I'll keep trying in the meantime.

The original code is from the Intercom service (https://developers.intercom.com/docs/single-page-app) and is pretty straightforward.

It seems that adding a script under the Scripts folder includes the script in all pages regardless of having it set in the Required Scripts attribute for a page or a Block?

Here is a screenshot of the code. The external load of the script is in Script folder and then in the Layout Block OnReady event, I try to initialize the library with the code (xxxx is my personal ID):

window.Intercom("boot", {
  app_id: "xxxxxx"
});

In the console, no errors and I can see that the script is loaded, but then again, no indication that the event ever fired.



Hmm, it seems the screenshots don't show in full size, but you can see if opened in separate tabs.


PS, I can see that Outsystems themselves are using Intercom. It's the blue chat icon in the lower right corner. :) DS

Hi Niklas,

Did you tried this component?

Or a plugin is not what you're aiming for?

Cheers,

Hmm, weird. Everything seems OK and the the code is attaching to the load event, but is never fired. Is there something preventing this in Outsystems?

w.addEventListener('load', l, false);

w is window and the l function is the script generating code that is supposed to load the external script. I can see the handler is attached with getEventListeners(window).



Henrique Batista wrote:

Hi Niklas,

Did you tried this component?

Or a plugin is not what you're aiming for?

Cheers,

Hi Henrique, I saw that as well, but we want to use the Outsystems Now app for demo purposes and not only for native so that rules out plugins as I understand it?

Best,

Niklas//

Yup, you understood it right! 

Not sure if the behavior with the script will be as smooth though.

About the js code, I can give it a try to check with the object on the console to see whats going one.

I'll let you know of the outcome.

Cheers

Niklas Nasen wrote:

Hmm, weird. Everything seems OK and the the code is attaching to the load event, but is never fired. Is there something preventing this in Outsystems?

Hi Niklas,

I took a better look at your JavaScript, it is being used to dynamically add a <script> tag to your page (or reattach Intercom if it's already loaded). I think you might want to call this (exactly as is in your initial post) from a JavaScript tool on the handler for the OnInitialize event, .

The outcome should be an extra <script> entry on your <head> pointing to the actual Intercom library JS. After the script is loaded then you can launch the Intercom Messenger (I'd say place it on the handler for the OnRender event of your screens, or at least on the Layout block).

(I did this all in one fell swoop on the Codepen interactive example Intercom provides, and it worked like a charm, apart from some interaction with privacy extensions on my browser).

Hi Jorge, I know it works in Codepen and on other websites as I also have tried it there.   That's not the problem.

I have added the <head> generating Intercom script under the Scripts folder and I have set it as Required on the Homescreen. I can see in the Chrome debugger that the script is loaded, but the Load event never fires so the generation of the <head> script is never done.

When I then try to activate the Intercom functionality in for example OnRender, there's nothing happening since there's no functionality loaded.

Does that make sense?


Thanks,

Niklas//