The goal is to integrate with facebook messenger chat plugin.
I want to add this html code into the footer section of my outsystems application page
<!-- Messenger Chat Plugin Code -->
<div id="fb-root"></div>
<!-- Your Chat Plugin code -->
<div id="fb-customer-chat" class="fb-customerchat"> </div>
<script>
var chatbox = document.getElementById('fb-customer-chat'); chatbox.setAttribute("page_id", "166808116516878"); chatbox.setAttribute("attribution", "biz_inbox"); </script>
<!-- Your SDK code -->
window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v18.0' }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));
</script>
I tried using the html element widget , but it doesn't support the <script> tag.
How can i achieve this using the outsystem's way ?
From what I understand your application is Reactive, so you can add an HTML element into your web block. Than, copy the provided HTML and JavaScript code into the HTML element in the Web Block.
If that doesn't work you can try adding a screen action to the Preparation or OnReady of the screen and than use JavaScript to inject the HTML and script code into the DOM
var script = document.createElement('script');
script.innerHTML = "YOUR_SCRIPT_CONTENT_HERE";
document.body.appendChild(script);
Hi,
You can create a web block containing the HTML and script code you provided. After that you drag and drop the web block into your application screen, preferably in the footer or where you want the chat plugin to appear
Thanks for the reply but it is not clear for me , how will i run the js code above in the web block . Could you please provide a screenshot or an .oml to clarify that point ?
Thanks , I will try that