Ghost

To connect BeyondWords with Ghost, you will need to set up a custom integration through your Ghost dashboard.

1. Log into your Ghost dashboard

2. Go to Settings and then Integrations under the Advanced section

3. Scroll down and select Add custom integration

4. Name the integration BeyondWords and press Create

5. Copy the Admin API key and API URL fields

Once done:

Go to the Settings section in your project, click on the CMS integrations tab, select Ghost, paste the Admin API Key and API URL into the correct fields and click Test.

A successful test run indicates that your Ghost installation is now successfully integration with BeyondWords. When you will create or update posts from your Ghost dashboard, BeyondWords will then generate the corresponding audios.

Enable the BeyondWords Player

To enable the BeyondWords Player in the posts that have been converted to audio, insert the player script into your Ghost site footer code:

1. Copy the BeyondWords script presented in the Ghost integration settings

2. Log into your Ghost dashboard

3. Go to 'Settings' and then ‘Code injection’ under the 'Advanced' section

4. Paste the script into a new line in the ‘Site Footer’ code and press ‘Save’.

The articles on your Ghost site will now present an interactive audio player with which your readers can listen to them.

Player customization

Position

To change the position where the audio player should load, please add a target property to the initialization object passed to BeyondWords.GhostHelper:

<script async defer src="https://proxy.beyondwords.io/npm/@beyondwords/ghost-helper@latest/dist/umd.js"
  onload="new BeyondWords.GhostHelper({
    projectId: <ID>,
    target: '.custom-target',
  })">
</script>

This will force the player to load as a child in the element with id cusom-target in your active Ghost theme.

Style

To make minor changes to the player styling you may use the beyondwords-player id to apply CSS rules to the player:

<style>
  #beyondwords-player {
    margin: 16px 0;
  }
</style>
<script async defer src="https://proxy.beyondwords.io/npm/@beyondwords/ghost-helper@latest/dist/umd.js"
  onload="new BeyondWords.GhostHelper({
    projectId: <ID>
  })">
</script>