Add facebook messenger

Report · Dec 14, 2020

Hey! I want to insert fb messenger on a client website. He already send me the code that he created directly on fb. The problem is that I already insert it on the HTML code but the widget doesn´t appear.

Can any one please help me with this?

Here is the code my client sent me:

(I erased the page id)

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v9.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/es_LA/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-customerchat"
attribution=install_email
page_id="000000000000"
theme_color="#20cef5"
logged_in_greeting="Hola, bienvenido/a a NanoRec ¿en qué podemos ayudarte? "
logged_out_greeting="Hola, bienvenido/a a NanoRec ¿en qué podemos ayudarte? ">
</div>

Report · Dec 15, 2020

I cannot recommend at all to do what you want to do, to implement a FB messenger on a clients website, done with Muse.

It may work, to add an iframe element to the muse site and insert that code into it.

Most widgets vendors, worked with and for Muse may have gone to other apps. One of the last, keeping Muse alive in some way, is musethemes.com. But as far as I can see, not what you want exactly.

Widgets, not done for Muse won`t work on Muse sites, obviously. SO the widget may be fine with "normal" coded websites but not for muse (except the iframe solution).

Be aware that it is not a really good idea to provide websites, with new features to be done, using Muse at this moment except you know exactly what you do and have an alternative running in your mind, you know?

Kind Regards,

Uwe

Report · Dec 18, 2020

You can try pasting the code into your Muse HTML panel. This might work or it might not. It's hard to predict. As Uwe said, Muse is end of life and so are most of the 3rd party widgets that were made for it.

For best results, rebuild the site with a real HTML code editor like Dreamweaver, Pinegrow or Visual Studio Code.

Real code would look like this:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 4.5 Starter Page</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap 4.5 on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- Load Facebook JavaScript -->
<script>
window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v9.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/es_LA/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</head>

<body>

<header class="container">
<div class="row">
<div class="jumbotron mx-auto">
<h1>Bootstrap 4.5 in Dreamweaver</h1>
</div>
</div>
</header>

<main class="container">
<div class="row">
<div class="col-md-8 mx-auto">
<h2 class="text-info">Facebook Chat Plugin Test</h2>
<div id="fb-root"></div>
<!-- Chat Plugin code -->
<div class="fb-customerchat"
attribution="install_email" 
page_id="000000000000"
theme_color="#20cef5"
logged_in_greeting="Hola, bienvenido/a a NanoRec &#xbf;en qu&#xe9; podemos ayudarte? "
logged_out_greeting="Hola, bienvenido/a a NanoRec &#xbf;en qu&#xe9; podemos ayudarte? ">

</div>
</div>
</div>
</main>

<hr>

<footer class="text-center">
<p>Some footer text here...</p>
</footer>

<!--Supporting scripts: first jQuery, then popper, then Bootstrap JS, etc...--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Adobe Community

Add facebook messenger