Add facebook messenger

Explorer ,
Dec 14, 2020

Copy link to clipboard

Copied

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)

 

<!-- Load Facebook SDK for JavaScript -->
<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>

<!-- Your 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>

Views

45

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 15, 2020

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Dec 18, 2020

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more