Install on a Nuxt.js site

<aside> 💡 This method works for:

SSR'd sites
Static generated sites
Client side rendered sites (all the types of Nuxt rendering as of writing this guide!)

</aside>

Requirements

Access to the source code of your site
An Assistcord Widget ID

Let's get started

In order to install the widget on a Nuxt site, we need to change the way that your site's HTML is generated in order to insert the Assistcord script statically. To do this, create a file called app.html at the root of your Nuxt project (if you already have this file feel free to append it as shown), and populate the file with this code:

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
<head>
	<script async assistcord-id="MY_WIDGET_ID" src="<https://widget.assistcord.com/assistcord.js>"></script>
  {{ HEAD }}
</head>
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
</html>

<aside> 🚨 Make sure to replace MY_WIDGET_ID with your actual Widget ID, otherwise the widget will not load.

</aside>

What this code does is instruct Nuxt to add the Assistcord script tags to the code it uses to generate your site's HTML. Once you've made those changes to the file you'll need to fully restart Nuxt (even in development mode!) to see the results working.

<aside> ✅ You're all done! The widget is now fully installed. Make sure to push your site's code to production.

</aside>

Having trouble?

If you've followed all the steps above and the widget still isn't appearing, contact us by pressing the chat button in the bottom right!