# Chat

## Open chat

<doc-tabs>
<doc-tab name="Preview" :selected="true">
  <iframe style="border: 0; width: 100%; height: 600px; border: 1px solid #ccc;" :src="$withBase('/guide/compositions/chat/chat-example.html')"/>
  <div class="app">
    <div class="d-flex justify-content-end">
      <v-button :href="$withBase('/guide/compositions/chat/chat-example.html')" class="pr-0" target="_blank" link>Open in new tab</v-button>
    </div>
  </div>
</doc-tab>
<doc-tab name="Code">

<<< @/src/docs/guide/compositions/chat/chat-example.html

</doc-tab>
</doc-tabs>

## Closed chat

<doc-tabs>
<doc-tab name="Preview" :selected="true">
  <iframe style="border: 0; width: 100%; height: 600px; border: 1px solid #ccc;" :src="$withBase('/guide/compositions/chat/closed-chat-example.html')"/>
  <div class="app">
    <div class="d-flex justify-content-end">
      <v-button :href="$withBase('/guide/compositions/chat/closed-chat-example.html')" class="pr-0" target="_blank" link>Open in new tab</v-button>
    </div>
  </div>
</doc-tab>
<doc-tab name="Code">

<<< @/src/docs/guide/compositions/chat/closed-chat-example.html

</doc-tab>
</doc-tabs>

## Frontpage teaser

<doc-tabs>
<doc-tab name="Preview" :selected="true">
<div class="app">
  <v-card>
    <div class="row">
      <div class="col-md-6">
        <v-chat-teaser>
          <v-chat-bubble-teaser member>
            Hej 3F. Har jeg fri 1. maj? 😊
          </v-chat-bubble-teaser>
          <v-chat-bubble-teaser caseworker>
            <div>Hej Kirsten,</div>
            <div class="mt-3">Ja, som rengøringsassistent har du ret til halv fridag 1. maj.</div>
          </v-chat-bubble-teaser>
          <v-chat-bubble-teaser member>
            Skønt! Mange tak for hurtig tilbagemelding
          </v-chat-bubble-teaser>
          <v-chat-bubble-teaser caseworker>
            <div>Du er altid velkommen til at skrive, hvis du har andre spørgsmål.</div>
            <div class="mt-3">God kampdag 💪</div>
          </v-chat-bubble-teaser>
        </v-chat-teaser>
      </div>
      <div class="col-md-6">
        <div class="d-md-flex flex-md-column justify-content-md-center h-100">
          <v-stack size="xsmall">
            <v-text heading size="frontpage">
              Spørg din afdeling
            </v-text>
            <v-text>
              Du kan nemt og hurtigt komme i kontakt med din afdeling, hvis du har et fagligt spørgsmål eller har brug for hjælp. Opret en henvendelse, og få svar på Mit3F, hvor du kan følge din korrespondance med din 3F fagforening eller a-kasse.
            </v-text>
            <div class="mt-4">
              <v-button href="?SC_LOCKED" class="d-none d-md-inline-block">Opret henvendelse</v-button>
              <v-button href="?SC_LOCKED" class="d-block d-md-none w-100">Opret henvendelse</v-button>
            </div>
          </v-stack>
        </div>
      </div>
    </div>
  </v-card>
</div>
</doc-tab>
<doc-tab name="Code">

```html
<div class="app">
  <v-card>
    <div class="row">
      <div class="col-md-6">
        <v-chat-teaser>
          <v-chat-bubble-teaser member>
            Hej 3F. Har jeg fri 1. maj? 😊
          </v-chat-bubble-teaser>
          <v-chat-bubble-teaser caseworker>
            <div>Hej Kirsten,</div>
            <div class="mt-3">Ja, som rengøringsassistent har du ret til halv fridag 1. maj.</div>
          </v-chat-bubble-teaser>
          <v-chat-bubble-teaser member>
            Skønt! Mange tak for hurtig tilbagemelding
          </v-chat-bubble-teaser>
          <v-chat-bubble-teaser caseworker>
            <div>Du er altid velkommen til at skrive, hvis du har andre spørgsmål.</div>
            <div class="mt-3">God kampdag 💪</div>
          </v-chat-bubble-teaser>
        </v-chat-teaser>
      </div>
      <div class="col-md-6">
        <div class="d-md-flex flex-md-column justify-content-md-center h-100">
          <v-stack size="xsmall">
            <v-text heading size="frontpage">
              Spørg din afdeling
            </v-text>
            <v-text>
              Du kan nemt og hurtigt komme i kontakt med din afdeling, hvis du har et fagligt spørgsmål eller har brug for hjælp. Opret en henvendelse, og få svar på Mit3F, hvor du kan følge din korrespondance med din 3F fagforening eller a-kasse.
            </v-text>
            <div class="mt-4">
              <v-button href="?SC_LOCKED" class="d-none d-md-inline-block">Opret henvendelse</v-button>
              <v-button href="?SC_LOCKED" class="d-block d-md-none w-100">Opret henvendelse</v-button>
            </div>
          </v-stack>
        </div>
      </div>
    </div>
  </v-card>
</div>
```

</doc-tab>
</doc-tabs>