Search code examples
smooch

How to append the Smooch web-messenger-container element to a custom element


I want to be able to append the #web-messenger-container element to an element instead of the document.body.

I've tried using Smooch.render without setting the embedded attribute to true and it works fine on some browsers, but on others, the smooch CDN calls are cancelled. It is related with this issue: https://github.com/smooch/smooch-web/issues/666

I don't want to use embedded mode, I just want to move the Smooch button to another container. I've tried moving the iframe element with JS but it causes the iframe to reload and the Smooch window disappears.


Solution

  • I would say if you want to append #web-messenger-container to a different element, embedded mode is the way to do that. Without embedded mode Smooch's host JS will call render() to append the iframe on it's own so trying to call it second time will give you nothing but grief I think.

    If all you want is to render your own open/close button, that's pretty straightforward. You can specify a custom button width and height of '0', and trigger Smooch.open() / Smooch.close() however you like.

    For example:

    https://jsfiddle.net/alavers/ve5uhjnd/