Barmer Fractal

Contact Flyout: Default 

<div class="o-contact-flyout  js-contact-flyout-init" id="bm-contact-flyout">
    <button class="a-btn btn--contact-flyout is-open" type="button" aria-haspopup="true" aria-expanded="false"><span class="btn__text">Kontakt</span><i class="a-icon icon--chat" aria-hidden="true"></i></button>

    <div class="contact-flyout__slides-collection is-hidden">
        <div class="m-contact-flyout-slide contact-flyout-slide--main is-hidden">
            <div class="m-contact-flyout-panel ">

                <i class="a-icon icon--chat" aria-hidden="true"></i>

                <h2 class="contact-flyout-panel__title">
                    Kontakt
                </h2>

                <button class="a-btn btn--close" type="button" aria-label="Schließt das Menü"><i class="a-icon icon--close" aria-hidden="true"></i></button>

            </div>

            <div class="contact-flyout-slide__content">
                <ul class="a-list-basic list-basic--with-option">
                    <li class="list__item ">
                        <a href="#slide-1" class="a-link link--with-icon-left contact-flyout-slide__link" aria-controls="slide-1">
                            <i class="a-icon icon--chat" aria-hidden="true"></i>&nbsp;<span class="link__inner">BARMER Chat</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </a>

                    </li>
                    <li class="list__item ">
                        <a href="https://www.barmer.de/" class="a-link link--with-icon-left contact-flyout-slide__link">
                            <i class="a-icon icon--contact" aria-hidden="true"></i>&nbsp;<span class="link__inner">Telefon 0800 333 0333</span>
                        </a>

                    </li>
                    <li class="list__item ">
                        <a href="#slide-2" class="a-link link--with-icon-left contact-flyout-slide__link" aria-controls="slide-2">
                            <i class="a-icon icon--message" aria-hidden="true"></i>&nbsp;<span class="link__inner">E-Mail schreiben</span>&nbsp;<i class="a-icon icon--chevron-right" aria-hidden="true"></i>
                        </a>

                    </li>
                    <li class="list__item ">
                        <a href="https://www.barmer.de/" class="a-link link--with-icon-left contact-flyout-slide__link">
                            <i class="a-icon icon--callservice" aria-hidden="true"></i>&nbsp;<span class="link__inner">Rückrufservice</span>
                        </a>

                    </li>
                    <li class="list__item ">
                        <a href="https://www.barmer.de/" class="a-link link--with-icon-left contact-flyout-slide__link">
                            <i class="a-icon icon--document" aria-hidden="true"></i>&nbsp;<span class="link__inner">Telefax 0800 333 0090</span>
                        </a>

                    </li>
                    <li class="list__item ">
                        <a href="https://www.barmer.de/" class="a-link link--with-icon-left contact-flyout-slide__link">
                            <i class="a-icon icon--contact" aria-hidden="true"></i>&nbsp;<span class="link__inner">Ausland +49 202 568 333 1010</span>
                        </a>

                    </li>
                    <li class="list__item ">
                        <a href="https://www.barmer.de/" class="a-link contact-flyout-slide__link">
                            Weitere Kontaktmöglichkeiten
                        </a>

                    </li>
                </ul>

            </div>
        </div>

        <div class="m-contact-flyout-slide contact-flyout-slide--sub is-hidden" id="slide-1">
            <div class="m-contact-flyout-panel ">

                <button class="a-btn btn--back" type="button" aria-label="Zurück"><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>

                <h2 class="contact-flyout-panel__title">
                    <i class="a-icon icon--chat" aria-hidden="true"></i>
                    BARMER Chat
                </h2>

                <button class="a-btn btn--close" type="button" aria-label="Schließt das Menü"><i class="a-icon icon--close" aria-hidden="true"></i></button>

            </div>

            <div class="contact-flyout-slide__content">
                <div class="a-richtext richtext--contact-flyout">
                    <h3>Chat für Versicherte</h3>
                    <p>Sind Sie bei Meine BARMER registriert?<br>Loggen Sie sich vor dem Start des Chats für eine persönliche und datenschutzsichere Beratung ein.</p>
                    <p>Der Chat ist erreichbar jeweils von <br>Montag - Freitag zwischen 07:00 -20:00 Uhr</p>
                    <p><button class="a-btn btn--primary js-btn-genesys" data-chat-type="client" type="button">Zum Chat für Versicherte</button></p>
                    <h3>Chat fuer Interessierte</h3>
                    <p>Ich habe keine eigene Mitgliedschaft bei der BARMER und bin an den Vorteilen interessiert.</p>
                    <p>Nutzen Sie unseren Chat fuer Interessenten im Bereich <a href="#" class="bm-richtext-link">Mitglied werden</a></p>
                    <p><button class="a-btn btn--primary js-btn-genesys" data-chat-type="interested" type="button">Zum Chat für Interessierte</button></p>
                </div>

            </div>
        </div>

        <div class="m-contact-flyout-slide contact-flyout-slide--sub is-hidden" id="slide-2">
            <div class="m-contact-flyout-panel ">

                <button class="a-btn btn--back" type="button" aria-label="Zurück"><i class="a-icon icon--arrow-back" aria-hidden="true"></i></button>

                <h2 class="contact-flyout-panel__title">
                    <i class="a-icon icon--message" aria-hidden="true"></i>
                    E-Mail
                </h2>

                <button class="a-btn btn--close" type="button" aria-label="Schließt das Menü"><i class="a-icon icon--close" aria-hidden="true"></i></button>

            </div>

            <div class="contact-flyout-slide__content">
                <div class="a-richtext richtext--contact-flyout">
                    <h3>Meine BARMER</h3>
                    <p>Nuzen Sie das Online-Postfach</p>
                    <p>bei Meine BARMER zur persönlichen und datenschutzsicheren Kommunikation.</p>
                    <p><a href="#" class="bm-button bm-button--primary">Zum Online-Postfach</a></p>
                    <h3>Kontaktformular</h3>
                    <p>Noch kein Online-Postfach? Nutzen Sie unser Kontaktformular.</p>
                    <p><a href="#" class="bm-button bm-button--primary">Zum Online-Postfach</a></p>
                    <h3>E-Mail an die BARMER</h3>
                    <p>Senden Sie uns eine Nachricht an <a href="#" class="bm-richtext-link">service@barmer.de</a></p>
                    <h3>E-Mail fuer Interessenten</h3>
                    <p>Sie sind noch nicht (selbst) bei der BARMER versichert und haben Interesse ab euber Mitgliedschaft bei uns? Schreiben Sie uns gerne eine E-Mail an <a href="#" class="bm-richtext-link">neukunde@barmer.de</a></p>
                </div>

            </div>
        </div>

    </div>

</div>
 
<div class="o-contact-flyout {{viewtypes.specifier}} js-contact-flyout-init" {{#switches.isAutoOpen}}data-open-after-seconds="{{content.secondsBeforeAutoOpen}}"{{/switches.isAutoOpen}} id="bm-contact-flyout">
  {{ render '@button--contact-flyout' this.partials.contactFlyouButton merge=true }}

  <div class="contact-flyout__slides-collection is-hidden">
    {{ render '@contact-flyout-slide' this.partials.mainSlide merge=true }}
    {{^ switches.isSinglePage }}
      {{ render '@contact-flyout-slide--sub' this.partials.chatSlide merge=true }}
      {{ render '@contact-flyout-slide--sub' this.partials.emailSlide merge=true }}
    {{/switches.isSinglePage}}
  </div>

</div>
 
{
  "switches": {
    "isSinglePage": false,
    "isAutoOpen": false
  },
  "viewtypes": {
    "specifier": ""
  },
  "content": {
    "secondsBeforeAutoOpen": ""
  },
  "partials": {
    "contactFlyouButton": {
      "viewtypes": {
        "specifier": "btn--contact-flyout is-open"
      }
    },
    "mainSlide": {
      "viewtypes": {
        "specifier": "contact-flyout-slide--main is-hidden"
      }
    },
    "chatSlide": {
      "viewtypes": {
        "specifier": "contact-flyout-slide--sub is-hidden"
      },
      "content": {
        "attributes": "id=\"slide-1\""
      }
    },
    "emailSlide": {
      "switches": {
        "hasContactList": false,
        "hasContactOptions": false
      },
      "viewtypes": {
        "specifier": "contact-flyout-slide--sub is-hidden"
      },
      "content": {
        "attributes": "id=\"slide-2\""
      },
      "partials": {
        "panel": {
          "switches": {
            "hasBackButton": true
          },
          "viewtypes": {
            "specifier": ""
          },
          "content": {
            "title": "E-Mail"
          },
          "partials": {
            "iconType": "icon--message"
          }
        },
        "richtext": {
          "switches": {
            "hasWrapper": true
          },
          "viewtypes": {
            "specifier": "richtext--contact-flyout"
          },
          "content": {
            "text": "<h3>Meine BARMER</h3><p>Nuzen Sie das Online-Postfach</p><p>bei Meine BARMER zur persönlichen und datenschutzsicheren Kommunikation.</p><p><a href=\"#\" class=\"bm-button bm-button--primary\">Zum Online-Postfach</a></p><h3>Kontaktformular</h3><p>Noch kein Online-Postfach? Nutzen Sie unser Kontaktformular.</p><p><a href=\"#\" class=\"bm-button bm-button--primary\">Zum Online-Postfach</a></p><h3>E-Mail an die BARMER</h3><p>Senden Sie uns eine Nachricht an <a href=\"#\" class=\"bm-richtext-link\">service@barmer.de</a></p><h3>E-Mail fuer Interessenten</h3><p>Sie sind noch nicht (selbst) bei der BARMER versichert und haben Interesse ab euber Mitgliedschaft bei uns? Schreiben Sie uns gerne eine E-Mail an <a href=\"#\" class=\"bm-richtext-link\">neukunde@barmer.de</a></p>"
          }
        }
      }
    }
  }
}

No notes defined.