Adding Disqus to Webflow is a great way to enhance the user experience on your website. Disqus is a popular commenting system that allows visitors to leave comments and engage in discussions on your web pages. In this tutorial, we will walk you through the step-by-step process of integrating Disqus into your Webflow site.
Step 1: Create a Disqus Account
If you don’t already have a Disqus account, head over to disqus.com and sign up for free. Once you have created an account, log in to the Disqus admin panel.
Step 2: Add Your Website
In the Disqus admin panel, click on the “Add” button located in the top navigation menu. This will open a form where you can add your website details.
- Website Name: Enter a name for your website (e.g., “My Webflow Blog”).
- Website URL: Enter the URL of your Webflow site (e., “https://www.mywebflowblog.com”).
- Select Category: Choose an appropriate category for your website (e., “Technology”, “News”, etc.).
Once you have filled in all the required details, click on the “Create Site” button to add your website to Disqus.
Step 3: Get Your Disqus Code
In the Disqus admin panel, click on the newly added website from the list of sites. This will take you to the settings page for that website. Scroll down until you see the section titled “Install Disqus on Your Site”.
Note: If you have multiple websites added to your Disqus account, make sure you select the correct website from the dropdown menu before proceeding.
Copy the JavaScript code provided in the “Universal Embed Code” section. This code will be used to integrate Disqus into your Webflow site.
Step 4: Integrate Disqus into Webflow
In your Webflow project, go to the page where you want to add Disqus comments. Open the page settings by clicking on the gear icon in the top-right corner of the designer.
In the page settings panel, select the “Custom Code” tab. Scroll down until you see the “Before </body>” field. Paste the Disqus JavaScript code into this field.
Save your changes and publish your Webflow site for the Disqus comments system to become active on your chosen page(s).
Step 5: Customize Disqus Appearance (Optional)
If you want to customize how Disqus looks on your Webflow site, you can do so by navigating back to the settings page for your website in the Disqus admin panel.
- Comment Count Link: Choose whether or not you want to display a link showing how many comments are on each page.
- Show Avatars: Toggle this option to display user avatars next to their comments.
- Show Media (Pictures and Videos): Enable this option if you want media content within comments to be displayed.
Make any desired changes and save your settings. The appearance of Disqus will now reflect your customizations on your Webflow site.
Congratulations!
You have successfully added Disqus to your Webflow site. Visitors can now leave comments and engage in discussions on your web pages, enhancing the overall user experience. Remember to actively moderate and respond to comments to foster a community-like atmosphere on your website!
Thank you for following along with this tutorial. If you have any questions or need further assistance, feel free to reach out. Happy commenting!