Comment les API de Vonage Communications permettent des expériences de vente au détail du 21e siècle

Cet article a été rédigé en collaboration avec Chris Tankersley

La tempête parfaite de défis pour les détaillants

Avant d'envisager la solution, examinons la gravité de la situation pour le commerce de détail en tant qu'industrie. Il y a quelques années, le directeur d'un grand distributeur nord-américain a envoyé un courriel alarmant à ses collègues du conseil d'administration : "Nous sommes en grande difficulté". Il venait de se rendre dans l'un des magasins et avait remarqué qu'un certain nombre de clients se promenaient avec leur téléphone et semblaient prendre des photos de la marchandise. Perplexe, il a demandé à quelques-uns d'entre eux ce qu'ils faisaient.

Ils utilisaient en fait leur téléphone pour lire les codes-barres, vérifier les prix des articles dans un magasin en ligne concurrent et effectuer leurs achats sur leur téléphone. En d'autres termes, le détaillant en magasin servait de salle d'exposition à son concurrent en ligne ! Ce phénomène, appelé "showrooming", signifie que chaque détaillant est assis sur des actifs immobiliers dont il ne profite plus exclusivement.

Les tendances récentes sur plusieurs marchés ont accentué le défi pour les détaillants : la pandémie de Covid-19 a eu un impact significatif sur la fréquentation des magasins pendant plusieurs mois, et maintenant que les économies ont redémarré, les problèmes de chaîne d'approvisionnement se sont accrus, et les magasins ont des difficultés à trouver du personnel.

UBS prévoit 50 000 fermetures de magasins rien qu'aux États-Unis au cours des cinq prochaines années. La question est donc la suivante : comment faire pour que les portes restent ouvertes et que les clients continuent d'affluer ?

L'engagement numérique dans les espaces physiques

Comme nous l'avons vu, le commerce de détail est confronté à des défis majeurs tels que le "showrooming", la diminution de la fréquentation, les perturbations de la chaîne d'approvisionnement et les problèmes d'embauche. Les communications numériques contribuent à résoudre certains de ces problèmes en permettant de nouvelles expériences.

Des recherches ont montré que les conversations de vente qui impliquent une interaction vidéo sont plus susceptibles d'aboutir à un résultat positif pour les vendeurs.

Pour en revenir au problème du "showrooming", en permettant les communications pendant que les clients sont dans le magasin, un assistant commercial à distance peut aider à conclure l'affaire sur place, en mesurant le sentiment, en évaluant toute hésitation et en répondant à toute question.

Par exemple, si le client pense effectivement à comparer les prix, l'agent peut faire une comparaison instantanée des prix tout en communiquant avec le client dans le magasin et éventuellement ajouter un coupon spécial ou une promotion, par exemple pour la livraison ou l'installation. Si le magasin peut répondre aux besoins du client pendant qu'il est prêt à faire un achat, il doit le faire.

Comment les API de Vonage peuvent aider à relever les défis du commerce de détail

L'API Video de Vonage peut être utilisée pour permettre à l'acheteur de voir la personne à qui il parle, avec les expressions faciales et tout ce qui rend une interaction riche ; pour que l'acheteur montre à l'agent ce qu'il regarde ; et pour que l'agent partage son écran si nécessaire. Un détaillant peut facilement mesurer le retour sur investissement en permettant le passage à la vidéo pour ces conversations (avec le consentement de l'acheteur, bien sûr).

Pour aider à visualiser une solution qui peut être rapidement mise en œuvre, voici un scénario d'augmentation du centre de contact sur lequel Vonage travaille activement avec certains de ses partenaires :

• Un client entre dans un magasin pour acheter un téléviseur à prix élevé, il a besoin d'aide pour prendre une décision et il n'y a pas de personnel expérimenté dans le magasin pour l'aider ;

• Le détaillant a placé des codes QR sur ses téléviseurs ;

• L'acheteur scanne un code QR qui l'amène à une page web sur son téléphone ;

• Sur cette page, l'acheteur peut saisir son numéro de téléphone pour dialoguer par SMS avec Vonage, ce qui lui permet de communiquer en direct avec un représentant du magasin qui connaît bien les produits télévisuels.

Bien que cet article ait pour but d'aider à faire bouger les choses, nous avons quelques exemples de code que vous pouvez utiliser pour voir comment les API de Vonage peuvent aider les interactions avec les détaillants. L'exemple d'application vous montrera comment utiliser notre Verify API pour valider un utilisateur et notre Voice API pour passer un appel à un agent d'assistance à l'intérieur du navigateur.

Exemple de code

Conditions préalables

• Node.js v14 ou supérieur

• Notre interface de ligne de commande, que vous pouvez installer avec npm install @vonage/cli -g

• Exemple de code qui montre que cette solution fonctionne de bout en bout

• Ngrok pour les tests locaux

Vonage API Account

To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.

Ready to start building?

Experience seamless connectivity, real-time messaging, and crystal-clear voice and video calls—all at your fingertips.

Configuration de l'application

Le code de l'exemple nécessite la création d'une Application Vonage. Pour créer l'application, nous utiliserons notre interface de ligne de commande. Si vous n'avez pas encore configuré l'interface de ligne de commande, faites-le en exécutant la commande vonage config:set --apiKey=api_key --apiSecret=api_secret dans votre terminal, où la clé API et le secret sont la clé API et le secret qui se trouvent dans les paramètres de votre compte. Account de votre compte.

Si vous exécutez l'application localement, vous devrez utiliser ngrok pour fournir un point de terminaison externe. Fournissez votre URL ngrok ou (ou toute autre URL d'hébergement) avec les routes /webhooks/answer pour l'Url de la réponse et /webhooks/events pour l'Url de l'événement.

Vous devez maintenant créer une Application Vonage. Une application contient les informations de sécurité et de configuration dont vous avez besoin pour vous connecter à Vonage. Dans votre terminal, créez une application Vonage à l'aide de la commande suivante en remplaçant les URL de réponse et d'événement par vos URL de ngrok ou d'hébergement :

Nous pouvons utiliser Vonage Verify pour nous assurer que la demande de chat est valide. Tout d'abord, nous pouvons créer une petite page pour demander le numéro de téléphone de l'utilisateur :

// 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")

L'utilisateur peut saisir son numéro de téléphone et nous lançons une demande de vérification. Celle-ci enverra un code à quatre chiffres au numéro de téléphone de l'utilisateur, qu'il pourra saisir sur l'écran suivant.

// 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")

L'utilisateur peut saisir le code PIN envoyé à son appareil. La plupart des appareils mobiles captent le SMS et permettent à l'utilisateur de remplir automatiquement le formulaire. Si l'utilisateur ne reçoit pas le SMS, Voice tentera également d'appeler le combiné et de fournir le code PIN par le biais d'un appel vocal.

// 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')
    }
  })
})

Une fois le numéro vérifié, nous pouvons créer un utilisateur qui nous permettra de permettre à l'utilisateur d'appeler ultérieurement notre agent directement à partir du navigateur. getUser() L'application trouvera l'utilisateur dans notre système et, s'il n'existe pas, le créera automatiquement.

Dans le même temps, vous pouvez interagir avec votre système de gestion de la relation client ou votre système d'agent pour avertir un agent qu'un utilisateur a demandé de l'aide.

Les informations du code QR sont automatiquement transmises au représentant concernant l'emplacement du magasin ainsi que la marque, le modèle et le prix du téléviseur. L'agent répond aux questions préliminaires de l'acheteur. Comme il n'est pas toujours pratique pour le client de taper au clavier, l'agent peut lui proposer de passer en douceur à une conversation vocale, en utilisant la fonction "click-to-call" de Vonage. Cela s'applique que le client utilise une page web ordinaire, un SMS ou un chat, ou même l'application mobile du magasin.

Une fois l'utilisateur vérifié, notre page web peut lui donner la possibilité d'appeler notre système.

// 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

Pour commencer, nous ajoutons deux boutons à la page qui permettront à l'utilisateur de contacter l'agent et de raccrocher. Nous incluons également le Client SDK de Vonage, qui gère la configuration en arrière-plan de la messagerie et de la voix dans le navigateur.

En ce qui concerne le code du navigateur, il y a plusieurs choses à faire. Nous devons générer un jeton d'authentification, appelé JWT. Ce jeton permet à notre navigateur de faire une demande à l'API de Vonage qui facilite l'appel dans le navigateur. Nous allons générer ce jeton côté serveur, car il nécessite un bloc de texte secret appelé clé privée.

// 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 })
})

Notre serveur créera le JWT spécifiquement pour notre utilisateur, et notre front-end l'enregistrera. Nous pouvons ensuite utiliser ce JWT pour nous connecter aux API de Vonage à l'aide de la classe JavaScript NexmoClientqui est une classe JavaScript fournie par notre Client SDK.

// 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;
}

Une fois que nous nous sommes connectés à l'API de Vonage avec nexmo.createSession(jwt)nous pouvons attacher un écouteur qui appellera notre agent lorsque l'utilisateur cliquera sur le bouton approprié. Nous allons également câbler le bouton "Raccrocher" pour que l'utilisateur puisse mettre fin à l'appel de son côté.

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();
        });
    })
}

Pour voir le code décrit dans ce billet de blog en action, jetez un coup d'œil au Github repo.

Conclusion

Grâce aux API de Vonage, les dirigeants du commerce de détail peuvent répondre aux besoins de leurs clients brick-and-mortar et minimiser les fuites de revenus vers la concurrence. Les API de Vonage peuvent être ajoutées à une variété d'Applications dans presque n'importe quel langage de programmation, permettant à vos utilisateurs de décider comment ils veulent être contactés.

Nous espérons que cela vous donnera quelques idées pour commencer à voir comment vous pouvez intégrer les API de communication de Vonage dans votre expérience de vente au détail.

Si vous avez des questions, rejoignez notre Communauté Vonage Slack ou envoyez-nous un message sur sur Twitter.

Pour en savoir plus

• API SMS de Vonage

• Verify API de Vonage

• Voice API de Vonage

• Contact Center Intelligence

• Analyse des sentiments en temps réel