Commenting on Ghost 3: Coral Project Talk v5

Since my initial post explaining how to add commenting to Ghost, both Coral Project Talk and Ghost have released new major version upgrades requiring some adjustments. While most things from the initial post remain valid, there is one key change - the embed code.

As such, you can still follow the steps in the initial guide, however the code snippet you need to add to the Site Footer in the Code Injection section of the admin panel.

<script src="https://YOUR-TALK-URL/assets/js/embed.js" async onload="
var articles = document.getElementsByClassName('post-full post');
  if (articles.length === 1) {
    var coral = document.createElement('div');
    coral.setAttribute('id', 'coral_thread');
    articles[0].appendChild(coral);
    
    document.getElementById('coral_thread').appendChild(
        Coral.createStreamEmbed({
            id: 'coral_thread',
            autoRender: true,
            rootURL: 'https://talk.florianjensen.com',
            // Uncomment these lines and replace with the ID of the
            // story's ID and URL from your CMS to provide the
            // tightest integration. Refer to our documentation at
            // https://docs.coralproject.net for all the configuration
            // options.
            // storyID: '{{id}}',
            // storyURL: '{{url}}',
        }))
  }
  
  
"></script>

That's it! Your commenting box should now load at the bottom of every post page.

The only thing I've seen to be an issue is with the Casper theme in dark mode, where the colours don't look great. If you have any suggestions on how to fix that, leave a comment below!