<div class="chatbox chatbox__popup--hide">
    <div class="chatbox__popup"><span class="chatbox__popup-close" data-a11y-dialog-show="chatbox-dialog">
<svg class="icon icon--close" id="icon-db2e" viewBox="0 0 200 200" role="presentation">
  <use xlink:href="#icon-close"></use>
</svg></span>
        <div class="chatbox__startup">
            <div class="chatbox__startup-headline">
                <h4 class="headline headline--display-4">Nutzungshinweise
                </h4>
            </div>
            <div class="chatbox__startup-text">
                <div class="formatted-text">
                    <p>Der neue Chatbot der HKK beantwortet Ihre Fragen und ist rund um die Uhr für Sie da. Der Chatbot befindet sich noch in einer Testpahse und entwickelt sich ständig weiter. Wir bitten um Verständnis, wenn noch nicht alles funktioniert.
                        Die Antworten des Chatbots sind nicht rechtsverbindlich und dienen lediglich der ersten Information. Sie ersetzen nicht die fachliche Beratung unserer Mitarbeiternnen und Mitarbeiter.</p>
                </div>
            </div>
            <div class="chatbox__startup-checkbox">
                <label class="checkbox">
  <input class="checkbox__input" type="checkbox" value="1" id="checkbox-ddbc" name="checkbox-ddbc"/><span class="checkbox__indicator"></span><span class="checkbox__label"><span class="formatted-text">Ich habe die <a href="https://www.hkk.de/datenschutz">Nutzungshinweise</a> und den Hinweis zum <a href="https://www.hkk.de/datenschutz">Datenschutz</a> zur Kenntnis genommen und bin damit einverstanden</span></span>
</label>
            </div>
            <div class="chatbox__startup-button">
                <button class="button button--red button--inactive" id="button-0fc6" type="button">Chat starten
</button>
            </div>
        </div>
        <div class="chatbox__bot" id="chatbot-chat"></div>
        <div class="dialog" id="chatbox-dialog" aria-hidden="true">
            <div class="dialog-overlay" tabindex="-1" data-a11y-dialog-hide="data-a11y-dialog-hide"></div>
            <div class="dialog-content chatbox-dialog__content" role="dialog" aria-labelledby="chatbox-dialog-title" aria-describedby="chatbox-dialog-description">
                <h1 class="headline headline--headline-1" id="chatbox-dialog-title">Chat beenden
                </h1>
                <p class="chatbox-dialog__text" id="chatbox-dialog-description">Soll der Chat wirklich beendet werden?</p>
                <div class="chatbox-dialog__controls">
                    <button class="button chatbox-dialog__button button--blue button--outline" data-a11y-dialog-hide="data-a11y-dialog-hide" aria-label="Schließt dieses Fenster und beendet den Chat" id="chatbox-dialog-close" type="button">Ja, jetzt beenden
</button>
                    <button class="button chatbox-dialog__button button--blue" data-a11y-dialog-hide="data-a11y-dialog-hide" aria-label="Schließt dieses Fenster und führt den Chat weiter" id="button-9af1" type="button">Nein, Chat weiterführen
</button>
                </div>
            </div>
        </div>
    </div>
</div>
#{tag || 'div'}.chatbox.chatbox__popup--hide
  .chatbox__popup
    span.chatbox__popup-close(data-a11y-dialog-show='chatbox-dialog')
      != include('@icon', { icon: 'close' })

    .chatbox__startup
      if headline
        .chatbox__startup-headline
          != include('@headline', headline)

      if content
        .chatbox__startup-text
          != include('@formatted-text', { content: content })

      if checkbox
        .chatbox__startup-checkbox
          != include('@checkbox', checkbox)

      if button
        .chatbox__startup-button
          != include('@button', button)

    #chatbot-chat.chatbox__bot

    #chatbox-dialog.dialog(aria-hidden='true')
      .dialog-overlay(tabindex='-1', data-a11y-dialog-hide)
      .dialog-content.chatbox-dialog__content(role='dialog', aria-labelledby='chatbox-dialog-title', aria-describedby='chatbox-dialog-description')
        != include('@headline--headline-1', { attr: { id: 'chatbox-dialog-title' }, text: 'Chat beenden' })

        p#chatbox-dialog-description.chatbox-dialog__text Soll der Chat wirklich beendet werden?

        .chatbox-dialog__controls
          != include('@button', { id: 'chatbox-dialog-close', attr: { 'data-a11y-dialog-hide': 'data-a11y-dialog-hide', 'aria-label': 'Schließt dieses Fenster und beendet den Chat', class: 'chatbox-dialog__button' }, modifier: 'blue', outline: true, text: 'Ja, jetzt beenden' })
          != include('@button', { attr: { 'data-a11y-dialog-hide': 'data-a11y-dialog-hide', 'aria-label': 'Schließt dieses Fenster und führt den Chat weiter', class: 'chatbox-dialog__button' }, modifier: 'blue', text: 'Nein, Chat weiterführen' })
{
  "headline": {
    "text": "Nutzungshinweise",
    "level": 4,
    "modifier": "display-4"
  },
  "content": "p Der neue Chatbot der HKK beantwortet Ihre Fragen und ist rund um die Uhr für Sie da. Der Chatbot befindet sich noch in einer Testpahse und entwickelt sich ständig weiter. Wir bitten um Verständnis, wenn noch nicht alles funktioniert. Die Antworten des Chatbots sind nicht rechtsverbindlich und dienen lediglich der ersten Information. Sie ersetzen nicht die fachliche Beratung unserer Mitarbeiternnen und Mitarbeiter.\n",
  "checkbox": {
    "text": null,
    "html": "span.formatted-text Ich habe die #[a(href='https://www.hkk.de/datenschutz') Nutzungshinweise] und den Hinweis zum #[a(href='https://www.hkk.de/datenschutz') Datenschutz] zur Kenntnis genommen und bin damit einverstanden\n"
  },
  "button": {
    "text": "Chat starten",
    "modifier": "red",
    "inactive": true
  }
}
  • Content:
    import A11yDialog from 'a11y-dialog';
    
    document.querySelectorAll('.chatbox__link').forEach(($target) => {
      const $main = document.querySelector('main');
      const $chatbox = document.querySelector('.chatbox');
      const $dialog = document.querySelector('#chatbox-dialog');
      const $close = $chatbox.querySelector('#chatbox-dialog-close');
      const $btn = $chatbox.querySelector('.chatbox__startup-button .button');
      const $input = $chatbox.querySelector('.checkbox__input');
    
      $input.addEventListener('change', () => {
        if ($input.checked) $btn.classList.remove('button--inactive');
        else $btn.classList.add('button--inactive');
      });
    
      $close.addEventListener('click', () => {
        $chatbox.classList.add('chatbox__popup--hide');
      });
    
      $target.addEventListener('click', (event) => {
        event.preventDefault();
        $chatbox.classList.remove('chatbox__popup--hide');
      });
    
      // eslint-disable-next-line
      const _ = new A11yDialog($dialog, $main);
    });
    
    document.querySelectorAll('.chatbox__startup-button .button').forEach(($target) => {
      $target.addEventListener('click', () => {
        const $chatbox = document.querySelector('.chatbox');
    
        if ($chatbox) $chatbox.classList.add('chatbox__startup--hide');
    
        const $scriptBotario = document.createElement('script');
        $scriptBotario.type = 'text/javascript';
        $scriptBotario.async = false;
        $scriptBotario.setAttribute('src', 'https://digitus-hkk-cc.apps.cloud.itsc.de/botario.js');
    
        const $scriptBotarioEmbed = document.createElement('script');
        $scriptBotarioEmbed.type = 'text/javascript';
        $scriptBotarioEmbed.async = false;
        $scriptBotarioEmbed.setAttribute('src', 'https://digitus-hkk-cc.apps.cloud.itsc.de/botario.embed.601bbc62238fb6003c573141.js');
    
        document.body.appendChild($scriptBotario);
        document.body.appendChild($scriptBotarioEmbed);
      });
    });
    
  • URL: /components/raw/chatbox/chatbox.js
  • Filesystem Path: src/components/molecules/chatbox/chatbox.js
  • Size: 1.9 KB
  • Content:
    .chatbox {
      position: sticky;
      z-index: z('chatbot');
    
      @include mq($until: l) {
        bottom: 0;
        display: flex;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
      }
    
      @include mq($from: l) {
        bottom: 2rem;
        left: 100%;
        margin-right: 2rem;
        width: 38.3rem;
      }
    }
    
    .chatbox__popup {
      background-color: #fff;
      box-shadow: rgb(183, 183, 183) 0 1px 5px 0;
      height: 100%;
      margin-bottom: 2rem;
      padding: 2.5rem;
      width: 100%;
    
      @include mq($from: l) {
        padding: 4rem;
      }
    }
    
    .chatbox__startup-text {
      .formatted-text {
        font-size: 1.5rem;
      }
    }
    
    .chatbox__startup-checkbox {
      margin-bottom: 2rem;
    
      .formatted-text a {
        color: $color-anthracite;
        font-weight: $root-font-weight;
        text-decoration: underline;
      }
    }
    
    .chatbox__popup-close {
      cursor: pointer;
      position: absolute;
      right: 2rem;
      top: 2rem;
      z-index: z('chatbot');
    
      .icon {
        color: $color-anthracite;
        font-size: 1.5rem;
      }
    }
    
    .chatbox__startup-button {
      .button {
        width: 100%;
    
        @include mq($from: l) {
          width: auto;
        }
      }
    
      .button--red.button--inactive {
        background-color: $color-steelgrey-dark;
        color: #fff;
        pointer-events: none;
      }
    }
    
    .chatbox__popup--hide {
      pointer-events: none;
    
      .chatbox__popup {
        display: none;
        opacity: 0;
        visibility: hidden;
        z-index: -1;
      }
    }
    
    .sticky-link-container:not(.sticky-link-container--in) {
      .chatbox__popup {
        @include mq($from: l) {
          opacity: 0;
          visibility: hidden;
          z-index: -1;
        }
      }
    }
    
    .chatbox__startup--hide {
      .chatbox__popup-close {
        left: 2rem;
        right: auto;
        top: 1.5rem;
    
        @include mq($from: l) {
          top: 1rem;
        }
      }
    
      .chatbox__startup {
        display: none;
      }
    
      .chatbox__popup {
        padding: 0;
    
        @include mq($from: l) {
          height: 49rem;
        }
      }
    
      .chatbox__bot {
        display: block;
      }
    }
    
    .chatbox__bot {
      display: none;
      font-size: 1.5rem;
      height: 100%;
      position: absolute;
      width: 100%;
    
      .footer {
        padding: 2.5rem;
      }
    
      .port {
        box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.25);
      }
    
      @include mq($from: l) {
        height: 49rem;
      }
    }
    
    .chatbox-dialog__content {
      text-align: center;
    }
    
    .chatbox-dialog__text {
      margin: $spacer * 0.5 0 $spacer * 2;
    }
    
    .chatbox-dialog__button {
      @include mq($until: m) {
        margin-bottom: $spacer;
    
        & + & {
          margin: 0;
        }
      }
    }
    
    // stylelint-disable
    .chatbox__bot .mobile.cont {
      zoom: 100% !important;
    
      .header {
        height: 50px !important;
      }
    
      .header .image {
        background-position: center !important;
      }
    
      .header .buttons {
        display: none !important;
      }
    
      .messages {
        bottom: 50px !important;
        top: 50px !important;
      }
    
      .message {
        font-size: inherit !important;
      }
    
      .buttons button {
        font-size: 15px !important;
      }
    
      .footer {
        height: 42px !important;
      }
    
      .footer #text {
        border-bottom-left-radius: 5px !important;
        border-top-left-radius: 5px !important;
        height: 30px !important;
        left: 5px !important;
        line-height: 30px !important;
        right: 85px !important;
        top: 5px !important;
      }
    
      .footer #text input {
        font-size: 15px !important;
        height: 30px !important;
        line-height: 30px !important;
        padding: 0 5px !important;
      }
    
      .footer #btnSend {
        border-bottom-right-radius: 5 !important;
        border-top-right-radius: 5 !important;
        font-size: 15px !important;
        height: 30px !important;
        line-height: 30px !important;
        right: 10px !important;
        top: 5px !important;
        width: 80px !important;
      }
    }
    //stylelint-enable
    
  • URL: /components/raw/chatbox/chatbox.scss
  • Filesystem Path: src/components/molecules/chatbox/chatbox.scss
  • Size: 3.6 KB

There are no notes for this item.