Skip to main content Skip to docs navigation
View on GitHub

Livechat

Liander Bootstrap custom component. Livechat component

On this page

Example

Livechat is a singleton absolute positioned component. This make it impossible to demonstratie the component on a documentation page. See the Livechat example page for a working example.

Basic

The basic setup is through the use of a Start Button. This will be placed in the lower right corner of the page.

<div class="livechat-start-button">
  Start Chat
</div>

<div class="livechat">
  <div class="livechat-header text-right">
    <button type="button" class="btn btn-link" data-bs-dismiss="livechat" aria-label="close">Close</button>
  </div>
  <div class="livechat-body">
    <iframe></iframe>
  </div>
</div>

Custom Trigger

Using data-bs-toggle="livechat" on an element creates a custom trigger to open the Livechat.

<button class="btn btn-secondary" data-bs-toggle="livechat">
  Start Livechat via a custom Component
</button>

<div class="livechat">
  <div class="livechat-header text-right">
    <button type="button" class="btn btn-link" data-bs-dismiss="livechat" aria-label="close">Close</button>
  </div>
  <div class="livechat-body">
    <iframe></iframe>
  </div>
</div>

Dismiss Livechat

Using data-bs-dismiss="livechat" on an element creates a custom trigger to close the Livechat. This can be used within the livechat element, but also outside, like data-bs-toggle="livechat".

<div class="livechat-start-button">
  Start Chat
</div>

<div class="livechat">
  <div class="livechat-header text-right">
    <button type="button" class="btn btn-link" data-bs-dismiss="livechat" aria-label="close">Close</button>
  </div>
  <div class="livechat-body">
    <iframe></iframe>
  </div>
</div>