SPA Integration

When you want to integrate Channel.me in your SPA application extra steps are needed to make sure the SPA application does not remove or overwrite the connection code updated by Channel.me.

The Problem

SPA frameworks (React, Vue, Angular, etc.) typically control the entire viewport and frequently re-render the DOM. This creates a conflict with Channel.me's connection code.

Channel.me places connection code in a element with id wwwchannelme
This code updates dynamically (e.g after sleep/reconnection)
SPA re-renders can overwrite this element breaking the connection

The Solution

In order to prevent loss of the connection script tag it is best to put the script into the head of the page. A SPA will usually not update these elements.

<head>
 <!-- Your own head elements -->

 <!-- channel.me script elements -->
 <script id="wwwchannelme" type="text/template"></script>
 <script type="text/javascript" src="//channel.me/siteconnect.js"
         data-code="your-account-code"
         defer></script>
</head>

<body>
  <div id="spa-root">
    <!-- part of the dom-tree updated with a SPA -->
    <span id="code" aria-label="Your connection code"></span>
    ...
  </div>
</body>

Now the SPA must track the changes in the wwwchannelme element. This is possible by connecting a MutationObserver to the element. By doing this the SPA can update the code whenever it changes. When the SPA changes the interface it can get the code and put it in the desired location.

Vanilla.js example:

'use strict';

function setCode() {
 const container = document.querySelector('script#wwwchannelme');

 // Lookup the element which holds the visible code
 const codeElement = document.querySelector('#code');

 // Change the code, when it is different.
 if(container.textContent
    && codeElement.textContent != container.textContent) {
   codeElement.textContent = container.textContent;
 }
}

window.addEventListener('load', () => {
 console.log("The page is loaded, install an observer for the wwwchannelme element");

 const container = document.querySelector('script#wwwchannelme');
 const observer = new MutationObserver(setCode);
 observer.observe(container, {
     attributes: true,
     childList: true,
     characterData: true});

 console.log("set Channel.me's code on page load");
 setCode();

 console.log("Setup hooks so the code gets updated whenever the DOM changes significantly");

 // Optional: listen to history changes, and change the code
 window.addEventListener("popstate", () => {
     console.log("A popstate history event occurred");
     setCode()
 });
 
 // Or use SPA specific hooks te set the code.
 const app = senna.dataAttributeHandler.getApp();
 app.on('endNavigate', () => {
     console.log("Senna.js navigation change occurred");
     setCode();
 });
});

This scrips install's a MutationObserver which tracks changes in the wwwchannelme element in the head, and updates the code on the page whenever it changes. Whenever the SPA changes the view, it can update the code in the SPA's view.

Conclusion

Integrating Channel.me into your SPA requires just two key steps: placing the script in the document `<head>` to prevent it from being overwritten, and using a MutationObserver to sync the connection code with your application's UI. With proper accessibility attributes, customers can easily share their connection code with support agents over the phone.

Use the example as a starting point and adapt them to your application's architecture. If you encounter issues, verify that the `wwwchannelme` element exists before setting up the observer, and check your browser console for any error messages.