smooch-component.md

Problem Overview

The smooch component is breaking when used together with Turbolinks, what happens is that whenever turbolinks changes the page, the component gets confused and causes unexpected behaviours.

Findings

There's a way to manually embed the smooch component, using the { embedded: true } option, this way we could manually add the styling for the component. I created a react component to wrap this behaviour:

class SmoochComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      active: true
    };

    this.setActive = this.setActive.bind(this);
  }

  setActive() {
    this.setState({ active: true });
  }

  componentDidMount() {
    const token = this.props.token;
    Smooch.init({ appToken: token, embedded: true });
    const element = this.refs.container;

    window.addEventListener('load', () => {
      Smooch.render(element);

      let header = document.getElementById('sk-header');

      header.addEventListener('click', () => {
        this.setState({ active: false });
      });
    });
  }

  render() {
    const componentClasses = classNames('smooch-component', { 'sk-appear': this.state.active }, { 'sk-close': !this.state.active });
    const buttonClasses = classNames('smooch-button', { 'button-shown': !this.state.active }, { 'button-hidden': this.state.active });

    return (
      <div>
        <div className={componentClasses} ref="container"></div>
        <div className={buttonClasses} onClick={this.setActive}>
          <div className='button-icon'>
            <img src='https://media.smooch.io/57c9a6bf550b7e5600bcbb63/icons/web_button_icon.jpg'/>
          </div>
        </div>
      </div>
    );
  }
}

And we would use the data-turbolinks-permanent attribute tell turbolinks not request again the data within this container:

<div data-turbolinks-permanent='true'>
  <%= react_component('SmoochComponent', { token: ENV['SMOOCH_APP_TOKEN'] }) %>
</div>

The issue still persist, though, the react component is getting mounted and unmounted on page change, so the attribute seems not to work properly for this situation.

Another problem with this approach would be the animations:

I'm using the same animations the component uses, but the fading is coming from the center instead of the corner of the page.

And we would lose the configuration options for the button that come from Smooch

carlows/smooch-component.md

Problem Overview

Findings