Outils audioAudio Native

Audio Native avec Webflow

Intégrez Audio Native à vos sites Webflow.

Suivez les étapes de la présentation d’Audio Native pour démarrer avec Audio Native avant de poursuivre ce guide.

1

Ajouter du HTML à votre article de blog

Accédez à votre blog Webflow, connectez-vous et ouvrez l’éditeur de l’article que vous souhaitez narrer.

2

Ajouter le code d’intégration à votre article de blog

Cliquez sur le symbole ”+” en haut à gauche, puis sélectionnez “Code Embed” dans le menu Elements.

Audio Native

Collez le code d’intégration Audio Native dans le champ HTML, puis cliquez sur “Save & Close”.

Extrait de code d’intégration
    <div
        id="elevenlabs-audionative-widget"
        data-height="90"
        data-width="100%"
        data-frameborder="no"
        data-scrolling="no"
        data-publicuserid="public-user-id"
        data-playerurl="https://elevenlabs.io/player/index.html"
        data-projectid="project-id"
    >
        Loading the <a href="https://elevenlabs.io/text-to-speech" target="_blank" rel="noopener">Elevenlabs Text to Speech</a> AudioNative Player...
    </div>
    <script src="https://elevenlabs.io/player/audioNativeHelper.js" type="text/javascript"></script>
Audio Native
3

Repositionner le code d’intégration

Dans le Navigator, placez le code d’intégration à l’endroit où vous souhaitez qu’il apparaisse sur la page.

Audio Native
4

Publier vos modifications

Enfin, publiez vos modifications et accédez à la version en ligne de l’article de blog. Un message vous indiquera que le projet Audio Native est en cours de création. Après quelques minutes, le texte de votre blog sera converti en article audio et le lecteur audio intégré apparaîtra.

Audio Native