Adding live chat support on valid amp page

amanintech commented 4 years ago

Describe the new feature or change to an existing feature you'd like to see

Adding a component to support live chat on the page without cusotm JS and keeping page AMP valid.

I have already tried using amp-script which is not working

@choumx @kristoferbaxter

Describe alternatives you've considered

A way we can add live chat support handles just like how amp-analytics does with analytics provider. It would be very useful we follow the same approach as analytics and pick most widely used live chat providers.

Additional context

One possible way I tried was using amp-analytics with Segment and then adding intercom as destination but this approach didnt worked. It was sending events and also data to added google analytics but wasnt adding intercom live chat on the page.

nainar commented 4 years ago

Could you describe how your approach with amp-script didn't go well?

amanintech commented 4 years ago

I think the problem is not fixable with amp script as AMP -script needs specified DOM where that JS can work whereas for a live chat feature, the JS makes that element on the run time and that is floating. So Its one of the limitations of AMP script I guess that it cant create new elements. Following is the code implementation.

<body>
<div>
    <amp-script layout="fixed-height" height="40" script="chat" class="sample">

    <script id="chat" type="text/plain" target="amp-script">
        window.intercomSettings = {
    app_id: "xxxxx"
  };
        // We pre-filled your app ID in the widget URL: 'https://widget.intercom.io/widget/xxxxx'
        (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/xxxx';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>

</amp-script>
</div>

</body>

So even the page is AMP valid but nothing renders on the actual HTML.

refer to the screenshot here you can see the div in which the script was defined and loads the JS but nothing happens

Do you think there something wrong with the way I have implemented it?

dreamofabear commented 4 years ago

The code is trying to inject a <script src="https://widget.intercom.io/widget/xxxx"> element which isn't allowed. amp-script is designed to run UI code directly, not dynamically load other scripts.

amanintech commented 4 years ago

I see. I even tried injecting this JS directly inline but that JS was also loading another bunch of JS from a CDN. So technically for this to work do I need to include all the declared using AMP script methods?

dreamofabear commented 4 years ago

Yea, generally amp-script is meant for JS that publishers write themselves.

I'd suggest using amp-iframe for widgets that require arbitrary third party scripts.

amanintech commented 4 years ago

Thanks for the suggestion @choumx, A live chat will be floating over the whole page and can't be done using an iframe as it requires designated space.

Am I missing something here?

roshanjonah commented 3 years ago

It would be awesome to have live chat support via custom javascript allowing because no chat provider I encountered so far is supporting Amp.dev because the adoption rate is too small. If you guys allow it, it will definitely increase the amp.dev adoption rate.

amanintech commented 3 years ago

Hey @roshanjonah I was surprised to stumble again on this thread. Unfortunately, there isn't any inbuild AMP-compatible solution for this yet. But I was able to find a workaround that made it possible for us to use intercom live chat while still keeping the AMP validated. Here it goes -

We use a server-side script logic that detects what kind of user agent is trying to access AMP.
For User agents other than Google, AMP Bot, and other crawlers, we inject the JS script using the traditional HTML method.
So A version of our AMP page is always amp valid when cached content users such Google search visits on mobile. There they won't see any live chat. But as soon as they transit through the side the normal AMP page is loaded and hence is the live chat because they are in a different User-agent scope now.

Code logic In PHP-

function bot_detected()
{
    return (
        isset($_SERVER['HTTP_USER_AGENT'])
        && preg_match('/Google|crawl|AMP|amp|Bot|bot|facebookexternalhit|SlurpCrawler|crawler|Crawler|Spider|spider|slurp|Slurp|index|Index|WhatsApp|Whatsapp/i', $_SERVER['HTTP_USER_AGENT'])
    );
}

 <?php //checking if bot
    if (!bot_detected()) {
        ?>
        <script>
          // Custom JS
        </script>
        <?php
    }
    ?>

I know this sounds like a hack but it's what is giving us the results. 100 % amp valid, Google AMP cache but still having live chat for usual site visitors. Obviously, the extra work needed is to set up a server to serve this dynamic logic.

And now I am thinking if I should write a blog about it - " Using Custom JS while still maintaining AMP validation"

Here is the live demo - Site - https://twimbit.com/start Validation - https://validator.amp.dev/#url=https%3A%2F%2Ftwimbit.com%2Fstart

Let me know if it works for you.

As a side note, I think this capability can be made even more flexible just like how we use the fallback element. Fallback loads when the browser doesn't have a capability whereas fall front( Inverse to fallback ) can load if the browser has the capability.

roshanjonah commented 3 years ago

@amanintech That sounds really good! Thank you for sharing this. I want to give it a go - just need to do it for Hugo (the CMS we are using at the moment).

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

ampproject / amphtml