top of page

Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Editor X

The rest is up to you.

Start Creating

Start Now

To see this working, head to your live site.

Stephen

Jul 31, 2021

Edited: Jul 31, 2021

Chatbots question

in General discussions

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:

https://help.continual.ly/article/75-using-your-own-button

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

3 comments

3 Comments

Stephen

Aug 01, 2021

Thank you

Lewis K Smith

Jul 31, 2021

•

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>

Ivan Alekseev

Aug 07, 2021

Replying to

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 <header> 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.

bottom of page