<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-e7a1" 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 Chatbot Luka ist rund um die Uhr für Ihre Anliegen da. Luka kann allerdings noch nicht jedes Thema und entwickelt sich stetig weiter. Die Antworten des Chatbots sind nicht rechtsverbindlich und dienen lediglich Ihrer ersten Information.
                        Sie ersetzen nicht die fachliche Beratung unserer Mitarbeiter*innen.</p>
                </div>
            </div>
            <div class="chatbox__startup-checkbox">
                <label class="checkbox">
  <input class="checkbox__input" type="checkbox" value="1" id="checkbox-0b8e" name="checkbox-0b8e"/><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. Ich willige in die damit verbundene Verarbeitung meiner Daten ein.</span></span>
</label>
            </div>
            <div class="chatbox__startup-button">
                <button class="button button--red button--inactive" id="button-27d7" 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">
                <h2 class="headline headline--headline-1" id="chatbox-dialog-title">Chat beenden
                </h2>
                <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-4d86" 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', { level: 2, 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 Chatbot Luka ist rund um die Uhr für Ihre Anliegen da. Luka kann allerdings noch nicht jedes Thema und entwickelt sich stetig weiter. Die Antworten des Chatbots sind nicht rechtsverbindlich und dienen lediglich Ihrer ersten Information. Sie ersetzen nicht die fachliche Beratung unserer Mitarbeiter*innen.\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. Ich willige in die damit verbundene Verarbeitung meiner Daten ein.\n"
  },
  "button": {
    "text": "Chat starten",
    "modifier": "red",
    "inactive": true
  }
}
  • Content:
    import A11yDialog from 'a11y-dialog';
    
    document.querySelectorAll('.js-chatbox').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.8 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.