DDChatBot web

Webcomponent for DDChatBot to be embedded in third party sites

How to

• Make sure you include the styles in your html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@dialogdata/ddchatbot-web@latest/dist/style.css" />

• Option 1. In your html include the following snippet

<div id="chat-bubble"></div>
<script type="module">
  import { chatBubble } from 'https://cdn.jsdelivr.net/npm/@dialogdata/ddchatbot-web@latest/dist/ddchatbot-web.js'

  chatBubble({
    api: {
      host: 'https://chat.dialogdata.de',
      path: '/chat',
      instance: '<instance-id>'
    }
  }, '#chat-bubble')
</script>

• Option 2. Use the webcomponent snippet

<script src="https://cdn.jsdelivr.net/npm/@dialogdata/ddchatbot-web@latest/dist/ddchatbot-web.umd.cjs"></script>
<dd-chat-bubble instance="<your-instance-id>"></dd-chat-bubble>

• If you want to position the bubble in lower right corner you can wrap the buble like this:

<div class="bubble-wrapper">
  <dd-chat-bubble instance="<your-instance-id>"></dd-chat-bubble>
</div>

webcomponent attributes are

• instance mandatory instance id
• host by default https://chat.dialogdata.de
• path by default /chat
• theme can be light or dark

where in the head section please add:

<style>
  .bubble-wrapper {
    position: fixed;
    right: 0;
    bottom: 0;
    margin: 3rem;
  }
</style>