Creating a multi-widget

Home > Technical Support > Tips & Tricks > Creating a multi-widget

To incorporate a multi-widget on your website, which includes features such as a contact form, Messenger and WhatsApp links, and a chat button, similar to those seen on www.liveagent.com, you may utilize the provided HTML template. For in-depth instructions about advanced widget integration refer to the following article.
 

 

Please note that this is not a default LiveAgent feature/widget and we do not offer technical support for this particular widget. This is only an example of how you can achieve a multi widget design like the one on our website. We recommend contacting your web developer for the widget's integration on your website or for any customizations tailored to your specific needs.
If you are interested in creating a default LiveAgent widget instead, please, visit the following articles for chat button or contact form.

In the below HTML template, you have to replace the following values:
    {your_messenger_name}  -- replace with your Facebook/Messenger profile name.
    {your_whatsapp_number}  -- replace with your WhatsApp number
    {your_subdomain}  -- replace with your LiveAgent´s subdomain
    3e6rgxlu  -- replace with the ID of your contact form (we recommend creating a custom HTML contact button)
    yq9fg176  -- replace with the ID of your chat button (we recommend creating a custom HTML chat button)
 

<div id="multiwidget" class="multiwidget">
  <span onclick="openMultiwidget();">&times;</span>
  <ul>
    <li id="elementForm" class="form" onclick="contactForm.onClick();">
      <font>Contact form</font>
      <img src="https://www.liveagent.com/app/themes/liveagent/assets/images/contact/form.svg" />
    </li>
    <a href="https://m.me/{your_messenger_name}?text=Hello%20support%20team!" target="_blank">
      <li class="mess">
        <font>Messenger</font>
        <img src="https://www.liveagent.com/app/themes/liveagent/assets/images/contact/messenger.svg" />
      </li>
    </a>
    <a href="https://wa.me/{your_whatsapp_number}?text=Hi!%20I%20am%20contacting%20you%20about..." target="_blank">
      <li class="what">
        <font>Whatsapp</font>
        <img src="https://www.liveagent.com/app/themes/liveagent/assets/images/contact/whatsapp.svg" />
      </li>
    </a>
    <li id="elementChat" class="chat" onclick="chatButton.onClick();">
      <font>Live chat</font>
      <img src="https://www.dropbox.com/scl/fi/6o76udnhmkj67sc2c5a0s/livechat.png?rlkey=dwqzgwlo161dss06dg2dpttx0&raw=1" />
    </li>
  </ul>
</div>
<div id="mainButton" class="main_button" onclick="openMultiwidget();">
  <span>Contact Us</span>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQkFnGM_CtOsOzloGOge47HQ7-U4gnyhrryn2iA7dmf0A&s" />
</div>

<!-- Start of LiveAgent integration script: Contact form button - Own HTML button -->
<script type="text/javascript">
var contactForm;
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.defer=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://{your_subdomain}.ladesk.com/scripts/track.js',
function(e){
  contactForm = LiveAgent.createButton('3e6rgxlu', e);
});
</script>
<!-- End of LiveAgent integration script -->

<!-- Start of LiveAgent integration script: Chat button - Own HTML button -->
<script type="text/javascript">
var chatButton;
(function(d, src, c) { var t=d.scripts[d.scripts.length - 1],s=d.createElement('script');s.id='la_x2s6df8d';s.defer=true;s.src=src;s.onload=s.onreadystatechange=function(){var rs=this.readyState;if(rs&&(rs!='complete')&&(rs!='loaded')){return;}c(this);};t.parentElement.insertBefore(s,t.nextSibling);})(document,
'https://{your_subdomain}.ladesk.com/scripts/track.js',
function(e){
  chatButton = LiveAgent.createButton('yq9fg176', e);
});
</script>
<!-- End of LiveAgent integration script -->

<script>
var openTrigger = 0;
function openMultiwidget() {
  if (openTrigger === 0) {
    document.getElementById("multiwidget").style.bottom = "110px";
    document.getElementById("multiwidget").style.opacity = "1";
    document.getElementById("mainButton").style.background = "linear-gradient(90deg,#ffbd39 0,#ffbd39 100%)";
    openTrigger++;
  } else {
    document.getElementById("multiwidget").style.bottom = "-350px";
    document.getElementById("multiwidget").style.opacity = "0";
    document.getElementById("mainButton").style.background = "linear-gradient(90deg,#ffbd39 0,#fa9531 100%)";
    openTrigger--;
  }
}
const elementForm = document.getElementById("elementForm");
const elementChat = document.getElementById("elementChat");
elementForm.addEventListener("click", openMultiwidget);
elementChat.addEventListener("click", openMultiwidget);
</script>


Do not forget to include the below CSS on your website as well:

Please be aware that the CSS code provided below could potentially be overridden by that of your own website, which may disrupt the functionality of the multi-widget design. We do not offer technical support for this particular widget. It's advised to reach out to your web developer for both the widget's integration on your site and for any customizations catered to your specific needs.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;600;800&display=swap');

#mainButton {
  background: linear-gradient(90deg,#ffbd39 0,#fa9531 100%);
}
#mainButton:hover {
  background: linear-gradient(90deg,#ffbd39 0,#ffbd39 100%) !important;
}
.main_button, .main_button > *, .multiwidget, .multiwidget > *, .multiwidget li img {
  box-sizing: content-box !important;
  vertical-align: initial !important;
}
.main_button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 10px 16px;
  border-radius: 15px;
  width: 165px;
  height: 56px;
  cursor: pointer;
  box-shadow: 0 0.25em 2em rgba(0,0,0,0.12);
}
.main_button img {
  width: 56px;
  border-radius: 50%;
  box-shadow: 0 0.25em 2em rgba(0,0,0,0.12);
  float: right;
}
.main_button span {
  position: relative;
  top: 15px;
  left: 5px;
  font-size: 16px;
  font-weight: 600;
  font-family: "Poppins","Helvetica Neue",Helvetica,Arial,sans-serif;
  color: white;
}
#multiwidget {
  bottom: -350px;
  opacity: 0;
  transition: .5s;
}
.multiwidget {
  background-color: white;
  font-family: "Poppins","Helvetica Neue",Helvetica,Arial,sans-serif;
  position: fixed;
  right: 20px;
  text-align: right;
  box-shadow: 0 0.25em 2em rgba(0,0,0,0.12);
  width: 260px;
  height: 400px;
  border-radius: 15px;
}
.multiwidget span {
  font-weight: 300;
  padding: 0px 10px;
  font-size: 40px;
  cursor: pointer;
  color: #333;
}
.multiwidget ul {
  padding-right: 10px;
  padding-left: 10px;
  width: 240px;
  border: none;
}
.multiwidget li {
  list-style-type: none;
  background-color: white;
  cursor: pointer;
  transition: .3s;
  margin-bottom: 6px;
  margin-left: 0;
  padding-top: 6px;
  padding-right: 6px;
  border-radius: 15px;
  font-weight: 600;
  border: none;
}
.multiwidget li img {
  width: 56px;
  margin-left: 16px;
  box-shadow: 0 0.25em 2em rgba(0,0,0,0.12);
  border-radius: 50%;
}
.multiwidget li font {
  position: relative;
  bottom: 22px;
  color: #333;
  font-size: 16px;
}
.multiwidget a {
  text-decoration: none !important;
  color: #333;
}
.multiwidget li.form:hover {
  background-color: #fee0e4;
}
.multiwidget li.mess:hover {
  background-color: #efe6f8;
}
.multiwidget li.what:hover {
  background-color: #daf4e7;
}
.multiwidget li.chat:hover {
  background-color: #feefe0;
}


If you're unable to import new fonts into your CSS files, you can instead embed the font directly into the <head> section of your HTML code:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">


Creating a custom HTML contact form button

Navigate to Configuration > Contact form > Contact buttons and click Create > Custom > Write your own HTML.
 


In the Button section, remove the HTML and CSS codes (keep only <!-- --> in the HTML field).
 


In the Contact form > Design section, set the Position to Embedded in page > Bottom right, and the Size to Auto.
 


Finally, get your subdomain and the ID of the button from the Integration section and paste them into the multi-widget HTML template. The contact button will be triggered by an element defined in the multi-widget template. For more details regarding advanced widget integration, please, visit the following article.
 

 

Creating a custom HTML chat button

Navigate to Configuration > Chat > Chat buttons and click Create > Custom > Write your own HTML.
 


In the Online button section, remove the HTML and CSS codes (keep only <!-- --> in the HTML field). Repeat the same process also in the Offline button section.
 


In the Contact form > Design section, set the Position to Embedded in page > Bottom right, and the Size to Auto.
 


Finally, get your subdomain and the ID of the button from the Integration section and paste them into the multi-widget HTML template. The contact button will be triggered by an element defined in the multi-widget template. For more details regarding advanced widget integration, please, visit the following article.
 

 

Updated:

Other Articles

×