Widget

#Ce qu'il fait

• Affiche une phrase, enregistre l'apprenant et joue un exemple.
• Marque chaque mot et chaque son, et montre la position de la bouche pour chaque son.
• Clair ou sombre : tu choisis, ou il suit l'appareil du visiteur.

#Le mettre en place

1. Dans la Vue d'ensemble de ta console, indique les sites qui afficheront le widget et crée une clé de widget.
2. Copie le code que la console te donne et colle-le dans ta page.

<iframe
  src="https://spelly.ch/widget?pk=pk_live_…&lang=en-GB&text=The%20quick%20brown%20fox."
  allow="microphone"
  style="width:100%;height:560px;border:0">
</iframe>

Garde allow="microphone" : sans lui, le navigateur ne laissera pas le widget enregistrer.

Les enregistrements évalués et les voix du modèle jouées dans le widget utilisent les unités de ton compte, exactement comme les appels à l'API : 1 unité par enregistrement, 0,5 par voix.

#Options

pk

Ta clé de widget. Obligatoire.

text

La phrase à pratiquer. 100 caractères au plus. Sans elle, l'apprenant tape la sienne.

lang

Langue de la phrase, exactement comme l'API la nomme : en-GB, en-US, es-ES, de-DE, fr-FR, it-IT, ca-ES. Obligatoire : en-GB pour l'anglais britannique, en-US pour l'anglais américain. Omise ou avec une autre valeur, le widget affiche une erreur.

theme

light, dark ou system. system, la valeur par défaut, suit le réglage de l'appareil du visiteur.

#Uniquement sur tes sites

Les navigateurs affichent le widget uniquement sur les sites indiqués pour sa clé. Partout ailleurs, il reste vide. Chaque adresse est exacte, comme https://learn.example.com : indique chaque sous-domaine que tu utilises. Pendant tes tests, indique ton adresse locale avec son port, comme http://localhost:5173. Tu peux changer la liste à tout moment, et révoquer une clé l'arrête partout d'un coup.