Chatbots question

Ask the community
1

We are using continual.ly for our website chatbots.

We use EditorX

site = cyberpenguin.co

We have 2 chatbots from continual.ly, the first is standard issue and appears at bottom of each page using a continual.ly script that we installed in the header section in the Custom Code section (alongside our Google analytics code).

I need some help with the second one please.

Here is the continual.ly article if interested:

It is a change to the class of a button on a page, so that a second/different chatbot is triggered when that button is clicked.

(This allows us to create page specific chatbots)

…
NOTE: You must have access to your HTML code in order to add a Continually class to trigger your bot

It says that it needs to be added to the class of the button, but I have NO IDEA where/how to access that code? I have turned on Dev Mode as well but even then the button/code doesn’t show in that area when I click on it?

Any help much appreciated.

Stephen

2

You can create your own button using the Embed Site block.

Once the block is added, make sure it’s set to code, then add the following code or any other button code that you like:

<center>
<a class="continually">Book A Demo</a> 
</center>

<style>
.continually {
 display: inline-block;
  width: 16em;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #000;
  background-color: #fff;
  border: none;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  font-size: 1rem;
  padding: 1.2rem 0rem;
    margin: 5px;
  text-decoration: none !important;
  }
  
.continually:hover
 {
  background-color:  #000;
  color: #fff;
  transform: translateY(-7px);
}
</style>
1 Like
3

Thank you

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.