Before using the VoiceDropper Text to Speech player on your website, you must first install the VoiceDropper JavaScript library. This library is responsible for rendering the audio player, generating speech playback, and enabling all interactive features.
VoiceDropper can be installed in different ways depending on your platform and workflow. For example, you can install it manually by adding a script tag, or use dedicated integrations such as the WordPress plugin.
Important: if the VoiceDropper library is not installed, any Text to Speech embeds, shortcodes, or widgets will not work. Always make sure the script is properly loaded before using any VoiceDropper component.
Manual installation
Manual installation is the most flexible way to integrate VoiceDropper Text to Speech into your website. This method is recommended for custom websites, static sites, frameworks, or advanced integrations.
To install VoiceDropper manually, copy your personal script URL from the Embed section of your project dashboard, or directly from the speech embed panel when generating a new audio speech.
Once you have the script URL, include it in your HTML document. You can place the script inside the <head> section or before the closing </body> tag.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>After adding the script, you can start embedding VoiceDropper Text to Speech players anywhere on your page using the HTML tags.
WordPress
VoiceDropper Text to Speech can be manually installed on WordPress by adding the VoiceDropper script directly to your active theme.
1. Open WordPress Dashboard
Log in to your WordPress admin panel.
2. Edit theme files
Go to Appearance → Theme File Editor and open the header.php file of your active theme.
3. Insert the VoiceDropper script
Paste your personal VoiceDropper script before the closing </head> tag.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>4. Save and verify
Save the changes and open your website to confirm that the script is loaded and VoiceDropper is working correctly.
Shopify
VoiceDropper Text to Speech can be manually installed on Shopify by editing your theme code and adding the VoiceDropper script directly to the main layout file.
1. Open Shopify Admin
Log in to your Shopify admin panel and select the store where you want to install VoiceDropper.
2. Edit your theme code
Go to Online Store → Themes, click the three dots button on your active theme, and select Edit code.
3. Open the main layout file
Open the file named theme.liquid located inside the Layout folder.
4. Add the VoiceDropper script
Paste your personal VoiceDropper script before the closing </head> tag.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>5. Save the changes
Click Save and open your storefront to verify that the script is loaded correctly.
Webflow
VoiceDropper Text to Speech can be installed on Webflow using the Custom Code feature.
1. Open Project Settings
Log in to Webflow and open your project settings.
2. Add the script to the Head section
Navigate to Custom Code and paste your VoiceDropper script inside the Head Code field.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>3. Publish the site
Save the changes and publish your website to activate the script.
Wix
VoiceDropper Text to Speech can be manually installed on Wix using the Custom Code feature.
1. Open Wix Dashboard
Log in to your Wix account and open your website settings.
2. Add Custom Code
Go to Settings → Custom Code and click Add Custom Code.
3. Insert the VoiceDropper script
Paste your script and set the position to Head and apply it to All Pages.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>4. Save and publish
Publish your website to enable VoiceDropper.
Squarespace
VoiceDropper can be installed on Squarespace using the Code Injection feature.
1. Open Website Settings
Go to Settings → Advanced → Code Injection.
2. Add the script
Paste the VoiceDropper script inside the Header section.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>3. Save changes
Save the configuration and refresh your website.
PrestaShop
To manually install VoiceDropper on PrestaShop, you need to edit the theme header template.
1. Access theme files
Connect via FTP or use the file manager in your hosting panel.
2. Open header template
Navigate to themes/YOUR_THEME/templates/_partials/head.tpl.
3. Insert the script
Add the VoiceDropper script before the closing </head> tag.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>4. Clear cache
Clear PrestaShop cache and reload your website.
Magento
VoiceDropper can be manually installed on Magento through the HTML Head configuration.
1. Open Magento Admin
Go to Content → Design → Configuration.
2. Edit active theme
Click Edit on your active theme configuration.
3. Add script
Paste the VoiceDropper script inside the HTML Head → Scripts and Style Sheets field.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>4. Save and flush cache
Save configuration and flush Magento cache.
Joomla
VoiceDropper Text to Speech can be manually installed on Joomla by editing your active template and adding the VoiceDropper script directly to the main layout file.
1. Access the Joomla Administrator Panel
Log in to your Joomla administrator dashboard using your admin credentials.
2. Open the Template Manager
Navigate to System → Site Templates → Templates and select your active template.
3. Edit the main template file
Open the file named index.php, which is the main layout file used to render your website pages.
4. Add the VoiceDropper script
Paste your personal VoiceDropper script before the closing </head> tag.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>5. Save and verify
Save the changes and open your website frontend to confirm that the script is loaded correctly and VoiceDropper features are working.
Drupal
VoiceDropper Text to Speech can be manually installed on Drupal by editing your active theme template or by adding the script through the theme settings.
1. Access the Drupal Admin Panel
Log in to your Drupal administration dashboard.
2. Locate the active theme files
Using FTP, SSH, or your hosting file manager, navigate to the active theme folder, usually located at:
themes/custom/YOUR_THEME/3. Edit the HTML template
Open the file html.html.twig or page.html.twig, depending on your theme structure.
4. Insert the VoiceDropper script
Paste your VoiceDropper script before the closing </head> tag.
<script src="https://voicedropper.felixg.io/plugin/[YOUR_PROJECT_ID]"></script>5. Clear Drupal cache
After saving the file, go to Configuration → Development → Performance and clear all caches to apply the changes.
6. Verify installation
Open your website frontend and confirm that the VoiceDropper script is loaded and the Text to Speech player works correctly.