Hi all,
Has anyone figured out a way to make Sendbird work on an AMP website?
AMP limits javascript and I’m not sure if it’s possible to use Sendbird inside Google’s amp-script component.
Thanks,
Rob
Hi @rmclister,
Welcome to the Sendbird Community. I’ve not see any reports of issues with AMP previously. Have you run into any explicit errors while trying to implement this yourself?
Hi Tyler, We haven’t tried it yet and don’t want to try it unless we know it works. Almost no live chat solutions work on AMP sites as far as I know. If we were to try Sendbird, how would you recommend it be implemented on an AMP website.
Note the following javascript limitations: Use custom JavaScript in AMP pages - amp.dev
Thanks,
I was able to include SendBird in the AMP playground, connect and send a message.
This code mixes an AMD Carousel and then SendBird script.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
h1 {
margin: 1rem;
}
body {
background-color: blue;
}
</style>
<!-- Axios for Sendbird -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js" referrerpolicy="no-referrer"></script>
<!-- Sendbird -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/sendbird/3.0.153/SendBird.min.js" integrity="sha512-USxGM9lYX8g82ijql46YpKcls3y4FsHpLDhGWCfn1d4c8YIev/nG42Pa78EIpWqsPsBhmaxkNS+U+fgBybqefw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<h1 id="hello">Hello AMPHTML World!</h1>
<amp-base-carousel loop="true" width="600" height="400" layout="responsive">
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
<amp-img src="https://source.unsplash.com/4yCXNMLP9g8/600x400" width="600" height="400" layout="responsive"></amp-img>
<amp-img src="https://source.unsplash.com/QrgRXH81DXk/600x400" width="600" height="400" layout="responsive"></amp-img>
<amp-img src="https://source.unsplash.com/8QJSi37vhms/600x400" width="600" height="400" layout="responsive"></amp-img>
</amp-base-carousel>
<!-- Script for moving the Carousel -->
<script async custom-element="amp-base-carousel" src="https://cdn.ampproject.org/v0/amp-base-carousel-0.1.js"></script>
<!-- Button to hide the H1 -->
<button on="tap:hello.hide">Click to hide H1</button>
<script>
// This script follows Sendbird's documentation.
// Init, connects, gets a channel by URL and sends a message.
var sb = new SendBird({appId: 'YOUR-SENDBIRD-APP-ID-HERE'});
sb.connect('ANY-USER-ID-HERE', (user, error) => {
if (error) {
console.log('Error: ', error)
} else {
console.log('User', user);
sb.GroupChannel.getChannel('ANY-CHANNEL-URL-HERE', (groupChannel, error) => {
if (error) {
console.log('Error', error);
} else {
const params = new sb.UserMessageParams();
params.message = 'Testing from AMP';
groupChannel.sendUserMessage(params, (userMessage, error) => {
if (error) {
console.log('Error', error)
} else {
console.log('Message sent!', userMessage);
}
});
}
});
}
});
</script>
</body>
</html>
Happy to hear from your own experiments!
Hi Walter, The problem is, this does not pass Google validation.
See this screenshot which shows 4 errors.
Link your Sendbird script from outside (this is just a demo) and use AMP-SCRIPT. You need to register the script’s hash, like:
< head>
< !–
A meta[name=“amp-script-src”] element contains all script hashes for
elements on the page, delimited by spaces.
– >
< meta
name=“amp-script-src”
content="
sha384-fake_hash_of_remote_js
sha384-fake_hash_of_local_script
"
/>
< /head>
All the information here:
