109
Views
11
Comments
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//

mvp_badge
MVP
Rank: #18

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??

Rank: #46863

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?

Rank: #46863

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

Rank: #46863

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.



Staff
Rank: #43

Hi Niklas,

Did you tried this component?

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

Cheers,

Rank: #46863

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).



Staff
Rank: #43

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

Rank: #46863

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//


mvp_badge
MVP
Rank: #7

Here's what I did to solve this in a React web app:

1. Created an "OnReady" event for my block (also seems to work with OnInitialize).

2. Made a JavaScript node in the OnReady, passed in the Intercom App Id, copy/pasted in the first Intercom snippet, set it up to use the app Id I passed in:


3. Made a second JavaScript node, also passed in App Id, copy/pasted in the second Intercom snippet. Changed it to use the app Id I passed in where it makes the URL:

At the end of the snippet, added: l();


This did the trick.

J.Ja