---
title: "telegra Browsercall"
canonical: "https://help.telegra.de/space/TMCC/9561715376129/telegra%20Browsercall"
format: markdown
---
Der telegra Browsercall bietet deinen Kunden und Kontakten die Möglichkeit, dein Unternehmen direkt über einen Button auf deiner Website anzurufen. Die Besonderheit ist, dass Du bestimmen kannst, wie  die Anzeige und angebotenen Kontaktmöglichkeiten je nach Verfügbarkeit deines Call Centers angezeigt werden.

Ein Beispiel:

- Sind Agenten in der hinterlegten Warteschleife verfügbar?
- Ist ein Agent per Chat in der konfigurierten Chat-Warteschlange verfügbar?
- Je nach Verfügbarkeit wird der Anruf- und / oder Chat-Button angezeigt
- Wenn beide Bedingungen <u>nicht</u> erfüllt sind wird ein Formular angezeigt, in dem der Website-Besucher seine Rufnummer und einen Wunschtermin für einen Rückruf eintragen kann.

---

### Einrichtung

**Schritt 1:** Zur Einbindung des Browsercalls auf deiner Website setze bitte folgende Scripte in den Head-Bereich Deiner Website:

> *<script src="*[https://browsercall.telegra.de/](https://browsercall.telegra.de/)polyfills.JZZDIHCH.js" type="module"></script>  
> <*script src="*[https://browsercall.telegra.de/](https://browsercall.telegra.de/)main.CXE2MUQO.js" type="module"></script>


Mit diesen Scripten kann dann folgendes Element geladen werden. Setze diesen Code an die Stelle Deiner Website, wo der Browsercall erscheinen soll.

```actionscript
<app-browsercall></app-browsercall>
        <script>
           const a = document.querySelector('app-browsercall')
           a.options = {
               uuid:"uuid des Kunden"
           }
       </script>
```

Bitte passe die UUID an. Die korrekte UUID erhältst Du von unserem Kundenservice.

---

#### Optionale Konfigurationsmöglichkeiten

Außerdem können noch weitere Parameter übergeben werden, um die Anwendung weiter zu konfigurieren und entsprechend deinem Look & Feel anzupassen:

##### **phoneActive** 

`phoneActive: true`  
  
Dieser Parameter gibt an, ob außer dem Anruf über den Browser auch ein Anruf mit einer beliebigen Nummer des Kunden möglich ist. 

In diesem Fall muss die Option folgendermaßen im Code eingebunden werden:

```actionscript
<app-browsercall></app-browsercall>
        <script>
           const a = document.querySelector('app-browsercall')
           a.options = {
               uuid:"uuid des Kunden",
               phoneActive: true
           }
       </script>
```

Nun wird im ersten Schritt ein Anruf auf diese Nummer gestartet und dieser anschließend mit der konfigurierten Hotline verbunden.

##### translations

```
translations: {
    browserCallLabel: 'Browser Anruf',
    phoneCallLabel: 'Anruf auf Rufnummer',
    startCall: 'Anruf Starten',
    chatText: 'Chat Starten',
    endCallLabel: 'Anruf beenden',
    backLabel: 'Zurück',
    callSuccessLabel: 'Anruf erfolgreich'
    yourNumber: 'Deine Rufnummer',
    yourSubject: 'Dein Anliegen',
    calbackButtonLabel: 'Rückruf',
    missingPermission: 'Bitte Mikrofonzugriff erlauben',
}
```

Hier können die Texte für die verschiedenen Buttons angepasst werden. 

> ℹ️ WICHTIG: Sämtliche Translation-Options müssen im Code enthalten sein - auch wenn sie an manchen Stellen gar nicht geändert werden.

##### css

```
customCSS: 'app-browsercall {<css>}';
customCSSURL: <urlZumCss>;
```

Das Styling kann entweder per URL oder eigenem CSS-File angepasst werden.

Es müssen nicht alle Elemente überschrieben werden, man kann auch zum Beispiel nur die Farben ändern. Die Standard CSS Einstellungen sehen wie folgt aus: