Wie Vonage Kommunikations-APIs Einzelhandelserlebnisse des 21. Jahrhunderts ermöglichen

Dieser Artikel wurde geschrieben in Zusammenarbeit mit Chris Tankersley

Der perfekte Sturm an Herausforderungen für Einzelhändler

Bevor wir uns mit der Lösung befassen, sollten wir uns den Ernst der Lage für den Einzelhandel als Branche vergegenwärtigen. Vor einigen Jahren schickte der Direktor eines führenden nordamerikanischen Einzelhandelsunternehmens eine alarmierende E-Mail an seine Vorstandskollegen: "Wir stecken in großen Schwierigkeiten". Er war gerade in einer der Filialen gewesen und hatte bemerkt, dass eine Reihe von Kunden mit ihren Handys herumliefen und anscheinend Fotos von den Waren machten. Verwundert fragte er ein paar von ihnen, was sie da taten.

Sie benutzten tatsächlich ihre Telefone, um die Strichcodes zu lesen, die Preise der Artikel in einem konkurrierenden Online-Shop zu überprüfen und den Kauf auf ihren Telefonen abzuschließen. Das bedeutete, dass der stationäre Einzelhändler als Showroom für den Online-Konkurrenten diente! Dieses Phänomen, das als "Showrooming" bezeichnet wird, bedeutete, dass jeder Einzelhändler nun auf Immobilienwerten saß, von denen er nicht mehr ausschließlich profitierte.

Die jüngsten Entwicklungen auf mehreren Märkten haben die Herausforderungen für den Einzelhandel noch verschärft: Die Covid-19-Pandemie hat die Besucherzahlen in den Geschäften mehrere Monate lang erheblich beeinträchtigt, und jetzt, wo die Wirtschaft wieder in Gang gekommen ist, haben sich die Probleme in der Lieferkette verschärft, und die Geschäfte haben Schwierigkeiten, Personal zu finden.

UBS prognostiziert 50.000 Ladenschließungen allein in den USA in den nächsten 5 Jahren. Die Frage ist also: Wie hält man die Türen offen und die Kunden bei der Stange?

Digitales Engagement in physischen Räumen

Wie wir gesehen haben, steht der Einzelhandel vor großen Herausforderungen durch "Showrooming", abnehmende Kundenfrequenz, Unterbrechungen der Lieferkette und Einstellungsprobleme. Die digitale Kommunikation hilft bei der Lösung einiger dieser Herausforderungen, indem sie neue Erfahrungen ermöglicht.

Untersuchungen haben gezeigt, dass Verkaufsgespräche, die eine Video-Interaktion beinhalten, mit größerer Wahrscheinlichkeit zu einem erfolgreichen Ergebnis für die Verkäufer führen.

Um auf das Problem des Showrooming zurückzukommen: Durch die Möglichkeit der Kommunikation, während sich die Kunden im Geschäft befinden, kann ein Fernverkaufsassistent dazu beitragen, das Geschäft direkt vor Ort abzuschließen, indem er die Stimmung misst, etwaiges Zögern feststellt und auf Fragen eingeht.

Wenn der Kunde zum Beispiel tatsächlich einen Preisvergleich anstrebt, kann der Mitarbeiter eine sofortige Preisanpassung vornehmen, während er mit dem Kunden im Geschäft kommuniziert, und möglicherweise einen speziellen Gutschein oder eine Sonderaktion, z. B. für die Lieferung oder Installation, anbieten. Wenn das Geschäft auf die Bedürfnisse des Kunden eingehen kann, während er bereit ist, einen Kauf zu tätigen, sollte es dies tun.

Wie die Vonage APIs bei Herausforderungen im Einzelhandel helfen können

Mit der Video API von Vonage kann der Kunde den Menschen sehen, mit dem er spricht, mit Mimik und allem, was eine Interaktion ausmacht; der Kunde kann dem Agenten zeigen, was er sieht, und der Agent kann bei Bedarf seinen Bildschirm teilen. Ein Einzelhändler kann den ROI leicht messen, indem er für diese Gespräche auf Video umschaltet (natürlich mit dem Einverständnis des Käufers).

Zur Veranschaulichung einer Lösung, die schnell implementiert werden kann, sehen Sie hier ein Szenario zur Erweiterung des Contact Centers, an dem Vonage mit einigen seiner Partner aktiv arbeitet:

• Ein Kunde kommt in ein Geschäft, um ein hochpreisiges Fernsehgerät zu kaufen, und braucht Hilfe bei der Entscheidung, aber es gibt kein erfahrenes Ladenpersonal, das ihm helfen kann;

• Der Einzelhändler hat QR-Codes auf seinen Fernsehgeräten angebracht;

• Der Käufer scannt einen QR-Code, der ihn zu einer Webseite auf seinem Handy führt;

• Auf dieser Seite kann der Kunde seine Telefonnummer eingeben, um über Vonage SMS zu chatten. Auf diese Weise steht der Kunde in Live-Kommunikation mit einem Mitarbeiter des Geschäfts, der sich mit Fernsehprodukten auskennt.

Auch wenn dieser Artikel dazu dienen soll, ein paar Dinge in Gang zu bringen, haben wir doch einige Beispielcodes, die Sie verwenden können, um zu sehen, wie Vonage APIs bei Interaktionen mit dem Einzelhandel helfen können. Die Beispielanwendung zeigt Ihnen, wie Sie unsere Verify API zur Validierung eines Benutzers und unsere Voice API für einen Browser-Anruf an einen Support-Agenten verwenden können.

Beispiel-Code

Voraussetzungen

• Node.js v14 oder höher

• Unser Command Line Interface, das Sie mit npm install @vonage/cli -g

• Beispiel-Code das zeigt, wie diese Lösung durchgängig funktioniert

• Ngrok für lokale Tests

Vonage API-Konto

Um dieses Tutorial durchzuführen, benötigen Sie ein Vonage API-Konto. Wenn Sie noch keines haben, können Sie sich noch heute anmelden und mit einem kostenlosen Guthaben beginnen. Sobald Sie ein Konto haben, finden Sie Ihren API-Schlüssel und Ihr API-Geheimnis oben auf dem Vonage-API-Dashboard.

Sind Sie bereit, mit dem Bau zu beginnen?

Erleben Sie nahtlose Konnektivität, Echtzeit-Messaging und kristallklare Sprach- und Videoanrufe - alles auf Knopfdruck.

Einrichtung der Anwendung

Für den Beispielcode muss eine Vonage Application erstellt werden. Um die Anwendung zu erstellen, verwenden wir unsere Befehlszeilenschnittstelle. Wenn Sie die Befehlszeilenschnittstelle noch nicht eingerichtet haben, können Sie dies tun, indem Sie den Befehl vonage config:set --apiKey=api_key --apiSecret=api_secret in Ihrem Terminal ausführen, wobei der API-Schlüssel und das Geheimnis der API-Schlüssel und das Geheimnis sind, die Sie in Ihren Einstellungen Ihres Accounts Seite zu finden sind.

Wenn Sie die Anwendung lokal ausführen, müssen Sie ngrok verwenden, um einen externen Endpunkt bereitzustellen. Geben Sie entweder Ihre ngrok URL oder (oder eine andere Hosting URL) mit Routen /webhooks/answer für die Antwort-URL und /webhooks/events für die Ereignis-Url.

Sie müssen nun eine Vonage-Anwendung erstellen. Eine Anwendung enthält die Sicherheits- und Konfigurationsinformationen, die Sie für die Verbindung zu Vonage benötigen. Erstellen Sie in Ihrem Terminal eine Vonage-Applikation mit folgendem Befehl und ersetzen Sie die URLs answer und event durch Ihre ngrok- oder Hosting-URLs:

Wir können Vonage Verify verwenden, um sicherzustellen, dass die Chat-Anfrage gültig ist. Zunächst können wir eine kleine Seite erstellen, die nach der Telefonnummer des Benutzers fragt:

// src/routes/verify.js
router.get('/', (request, response) => {
  response.render('verify/start', {
    item_name: request.query.item_name
  })
})

// views/verify/start.pug
doctype html 
html 
    head 
        title Store Chat Login
    
    body 
        form(method="post")
            div
                label Enter your mobile phone number to start a chat with #{item_name} 
            div
                input(name="mobile_number")
            div
                input(type="submit", value="Send Verification Code")

Der Benutzer kann seine Telefonnummer eingeben, und wir senden eine Verifizierungsanfrage ab. Dabei wird ein vierstelliger Code an die Telefonnummer des Nutzers gesendet, den er auf dem nächsten Bildschirm eingeben kann.

// src/routes/verify.js
router.post('/', (request, response) => {
  vonage.verify.request({
    number: request.body.mobile_number,
    brand: 'Vonage Store Demo',
    workflow_id: 6
  }, (err, results) => {
    if (err) {
      console.error(err)
    }

    request.session.verify_request_id = results.request_id
    request.session.mobile_number = request.body.mobile_number
    request.session.save()

    response.redirect('/verify/check')
  })
})

// views/verify/check.pug
doctype html 
html 
    head 
        title Store Chat Login
    
    body 
        form(method="post")
            div
                label Please enter the verification code that was sent to you 
            div
                input(name="verify_pin")
            div
                input(type="submit", value="Submit Verification Code")

Der Benutzer kann die PIN eingeben, die an sein Gerät gesendet wird. Die meisten Mobilgeräte empfangen die SMS und ermöglichen es dem Nutzer, das Formular ebenfalls automatisch auszufüllen. Wenn der Benutzer die SMS nicht erhält, versucht Vonage auch, das Mobiltelefon anzurufen und die PIN über einen Sprachanruf zu übermitteln.

// src/routes/verify.js
router.post('/check', async (request, response) => {
  vonage.verify.check({
    request_id: request.session.verify_request_id,
    code: request.body.verify_pin
  }, async (err, results) => {
    if (err) {
      delete request.session.verify_request_id
      request.session.save()
    } else {
      request.session.verified = true
      request.session.save()
      request.session.user = await getUser(request.session.mobile_number)

      response.redirect('/voice')
    }
  })
})

Sobald die Nummer verifiziert wurde, können wir einen Benutzer anlegen, der es uns ermöglicht, dass der Benutzer später unseren Agenten direkt vom Browser aus anrufen kann. getUser() findet den Benutzer in unserem System und erstellt ihn automatisch, wenn er nicht existiert.

Gleichzeitig können Sie mit Ihrem CRM- oder Agentensystem interagieren, um einen Agenten darauf hinzuweisen, dass ein Benutzer Hilfe angefordert hat.

Die Informationen des QR-Codes werden automatisch an den Vertreter weitergeleitet, der den Standort des Geschäfts sowie die Marke, das Modell und den Preis des Fernsehers kennt. Der Mitarbeiter beantwortet erste Fragen des Käufers. Da das Tippen für den Kunden nicht immer bequem ist, kann der Mitarbeiter anbieten, nahtlos zu einem Telefongespräch zu wechseln, indem er die Click-to-Call-Funktion von Vonage nutzt. Dies gilt unabhängig davon, ob der Kunde eine reguläre Webseite, eine SMS oder einen Chat oder sogar die eigene mobile App des Geschäfts nutzt.

Sobald der Benutzer verifiziert wurde, kann unsere Webseite ihm die Möglichkeit geben, unser System anzurufen.

// views/voice/index.pug
doctype html 
html 
    head 
        title Store Chat Login
        script(type="module", src="https://unpkg.com/nexmo-client@latest/dist/nexmoClient.js?module")
    
    body 
        p
            | You are currently logged in as 
            span(id="username")

        p A chat agent will contact you via text shortly.

        p
            | If you would rather talk to an agent, click 
            button(type="button", id="call_agent") here

        p
            button(type="button", id="hangup") Hang Up

Zunächst fügen wir der Seite zwei Schaltflächen hinzu, die es dem Benutzer ermöglichen, den Agenten zu kontaktieren und aufzulegen. Wir fügen auch das Vonage Client SDK hinzu, das die Hintergrund-Einrichtung für In-Browser-Messaging und Voice übernimmt.

Was den Browser-Code angeht, müssen wir einige Dinge tun. Wir müssen ein Authentifizierungs-Token, ein sogenanntes JWT, generieren. Dieses Token ermöglicht es unserem Browser, eine Anfrage an die Vonage-API zu stellen, die den Aufruf im Browser ermöglicht. Wir werden dieses Token serverseitig generieren, da es einen geheimen Textblock, den so genannten privaten Schlüssel, erfordert.

// src/routes/jwt.js
router.get('/jwt', (request, response) => {
  const jwt = vonage.generateJwt({
    sub: request.session.user.name,
    acl: {
      paths: {
        '/*/users/\*\*': {},
        '/*/conversations/**': {},
        '/*/sessions/**': {},
        '/*/devices/\*\*': {},
        '/*/image/**': {},
        '/*/media/**': {},
        '/*/applications/\*\*': {},
        '/*/push/**': {},
        '/*/knocking/**': {},
        '/\*/legs/\**': {}
      }
    }
  })

  response.json({ jwt })
})

Unser Server erstellt das JWT speziell für unseren Benutzer, und unser Front-End speichert es. Mit diesem JWT können wir dann eine Verbindung zu den Vonage-APIs herstellen, indem wir die NexmoClientdie eine JavaScript-Klasse ist, die von unserem Client SDK bereitgestellt wird.

// views/voice/index.pug
async function getJwt() {
    let jwt;
    await fetch('/auth/jwt')
        .then(results => results.json())
        .then(data => {
            jwt = data.jwt
        })
        .catch(err => console.error(err))

    return jwt;
}

Sobald wir uns mit der Vonage-API mit nexmo.createSession(jwt)verbunden haben, können wir einen Listener anhängen, der unseren Agenten anruft, wenn der Benutzer auf die entsprechende Schaltfläche klickt. Wir werden auch weitergehen und die Schaltfläche "Auflegen" verkabeln, damit der Benutzer den Anruf von seinem Ende aus beenden kann.

async function bootstrap() {
    let jwt = await getJwt();
    nexmo = new window.NexmoClient()
    app = await nexmo.createSession(jwt)
    document.getElementById('username').innerHTML = app.me.name

    document.getElementById("call_agent").addEventListener('click', (event) => {
        app.callServer('#{from_numer}');
    })

    app.on("member:call", (member, call) => {
        document.getElementById('hangup').addEventListener('click', (event) => {
            call.hangUp();
        });
    })
}

Um den in diesem Blogbeitrag beschriebenen Code in Aktion zu sehen, werfen Sie einen Blick auf das Github-Repositorium.

Schlussfolgerung

Mit den APIs von Vonage können Führungskräfte im Einzelhandel die Bedürfnisse ihrer stationären Kunden erfüllen und den Umsatzverlust für ihre Konkurrenz minimieren. Vonage APIs können zu einer Vielzahl von Applikationen in nahezu jeder Programmiersprache hinzugefügt werden, so dass Ihre Benutzer selbst entscheiden können, wie sie kontaktiert werden möchten.

Wir hoffen, dass Ihnen dies einige Ideen liefert, wie Sie Vonage Communication APIs in Ihr Einzelhandelsangebot integrieren können.

Wenn Sie Fragen haben, kommen Sie zu unserem Vonage Gemeinschaft Slack oder senden Sie uns eine Nachricht auf Twitter.

Weitere Lektüre

• Vonage-SMS-API

• Vonage Verify API

• Vonage Voice API

• Contact Center Intelligenz

• Stimmungsanalyse in Echtzeit