Chatbots question

Ask the community
4

I don’t think we can use " Embed Site " in this case.
We have " Embed Widget ", " Embed Site " or the " Custom Element " to create own HTML code;
If we use Embed Widget or Site on the live site the new html document with own DOM will be created. And the class of the button inside this new DOM won’t be affected by the “continual.ly” chat bot which is right inside the main WIX site DOM embeded in the via " settings " => " custom code " wix dashboard.
If we are to create " Custom Element " than CSS just using styles wont be enough, we should use JavaScript to create element and declare it’s CSS style properties. So we need to create a new .js file inside your " Code files " => " Public " => " Custom Elements " folder. In our case let’s call it " continually.js "
The code inside our continually.js can look something like this:

// To debug this code, open continually.js in Developer Tools.

const createTextContainer = () => {
  const textContainer = document.createElement('a');
  textContainer.id = 'wdce-text-container';
  textContainer.textContent = 'Try It Here Now (100% Free)';
  textContainer.setAttribute("class", "continually");
  textContainer.setAttribute("data-continually-conversation-id","6wkym5453ye2");
  return textContainer;
};

const createStyle = () => {
  const styleElement = document.createElement('style');
  styleElement.innerHTML = `
    continually-button {
        background-color: transparent;
        display: flex;
        width: 100%;
        justify-content: center;
      }
    #wdce-text-container {
        display: flex;
        width: auto;
        height: max-content;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0px;
        border: solid #ffffff 2px;
        font-family: 'HelveticaNeueW01-45Ligh, HelveticaNeueW02-45Ligh, HelveticaNeueW10-45Ligh, Helvetica Neue, Helvetica, Arial, メイリオ, meiryo, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, sans-serif',
        letter-spacing: 2.5px;
        font-weight: 500;
        color: #fff;
        background-color: transparent;
        transition: all 0.3s ease 0s;
        cursor: pointer;
        outline: none;
        font-size: 1rem;
        padding: 10px 20px 10px 20px;
        text-decoration: none !important;
      }

    #wdce-text-container:hover
     {
        background-color: white;
        color: #000;
     }
    `;
  return styleElement;
};

class continually extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.appendChild(createStyle());
    this.appendChild(createTextContainer());
  }
}
customElements.define('continually-button', continually);

In this case the element will become the part of the site and will be located in to the same DOM and it’s class properties would be reachable for the “continual.ly” widget.
So the idea of create own element with own class attributes (which would be readable by existing on the site header widget) can be realized using the “Custom Element”.

If you are going to use this button (custom element) more than ones in your site. Remove the textContainer.id = ‘wdce-text-container’;
and replace
textContainer.setAttribute(“class”, “continually”);
with
textContainer.setAttribute(“class”, “wdce-text-container continually”);
than in styles replace
#wdce-text-container with .wdce-text-container
Since we can’t have elements with the same id attribute.