Before we begin just heads up that this tutorial needs a paid plan on Webflow. 1
In this video, we're going to learn how to embed Custom Code in Webflow website. 2
Usually, this is used to insert a third party plugin anywhere on our page. 3
For example, things like calendar components, appointment booking, timers and a lot more. This time 4
we will install a commenting plugin on the blog post page. 5
After this, you will pretty much know how to install any other plugin. 6
Although, each plugin has their own specifications during installation. But those specifications are explained 7
by the plugin providers themselves. Usually providing video tutorials, so once you know what happens on 8
Webflow's site, it shouldn't be difficult to get yourself around the other plugins. 9
The commenting plugin, that we'll be using is called Disqus. 10
For starters, we need to create an account on Disqus and get instructions from there on how to install 11
it in on our website. 12
So go to Disqus.com, that DISQUS.com and click Get Started. Then sign up. 13
Next, you'll get to this gate asking you, if you want to install it on the website. So yeah, choose that. 14
Up next some basic site info like name and category. 15
Disqus has a free version with ads and paid packets without ads. For any website, in the beginning, free 16
version is absolutely fine. 17
That's what I always start with for my clients until there is a big enough traffic to switch to the 18
paid version, which doesn't cost much anyways. 19
Obviously that's for the clients to pay, not us. 20
Next, you'll get this screen to choose a platform. 21
These platforms offer direct integrations, but Webflow isn't on the list. Webflow doesn't usually have 22
any direct plug and play integrations with other platforms and plugins, where you can just click few 23
buttons and start using the plugin. 24
That's expected because Webflow is a little different from others, it's more like coding a website from 25
scratch. And we can manually install the plugin with an ease. So scroll down on the bottom of this list 26
and select manual installation. 27
We'll get this custom code that needs to be inserted directly on our blog post page. 28
Now, let's copy this code and head to Webflow. 29
We're going to add a new div block inside our container. 30
And from the elements panel add a new element called embed. 31
You will instantly open up that code editor, so paste your code in here. For a lot of plugins, 32
that's it. 33
This is where it ends. But not for Disqus. 34
There are a couple edits we have to make to the code itself. 35
First, let's see how it all looks. 36
Note, that custom code embeds usually you cannot see inside the editor or the preview mode. Only on 37
the published website. 38
Webflow doesn't run the code, to make sure it doesn't clash with the Designer. 39
On the live site it's visible, all fine. 40
That message box on top is only visible to us because we're admins of the site. 41
It's asking us, if we want to enable reactions on our site. 42
Maybe later. 43
So that's how it's going to look like, but not yet fully functional. Right now it's static, so it's only 44
going to work on this particular page. And every other comment that we will make on other pages, 45
it's going to be the same, because we haven't really connected this to our CMS. 46
Let's go back to the code and see what we need to change. 47
If you double click on the Embed element, code editor will open up. 48
This is a JavaScript code and inside the code there are comments that tell us exactly what we need to 49
change. First comment says that we need to replace page URL and second tells us to replace page identifier. 50
We just need to make those two changes and then uncomment that section. In JavaScript these symbols, 51
which is slash and the star or two slashes, create comments. But that section is part of the code, so we 52
need to uncomment it. Otherwise it's not going to run. 53
It's quite simple. 54
They are currently wrapped inside the symbols. One in the beginning, one after that. 55
If we remove both, it will turn into functional code. 56
You'll notice this by color change. 57
Next, we need to replace page URL. The page URL needs to be dynamic. 58
It's the URL of the particular blog post. Since we are doing this on a dynamic page, 59
on top of this code editor, we have this button to add a field. Similar as we had inside SEO settings, 60
if you remember. One of the options is a slug. 61
This is what comes after the final slash in the URL. 62
In our case, after blog slash. We can use that to create the URL value. 63
We just need to manually insert everything that comes in front of that slug, and then add slug right 64
next to it. 65
So Webflow will insert the rest of the URL automatically. 66
Just make sure to put this inside single quotes. 67
That's just how JavaScript works, in this case. 68
The page identifier needs to be some unique value that each blog post gets assigned. 69
We can again use slug for this. Because the slug will always going to be unique for each blog post. 70
In this case, just the slug is enough. 71
And don't forget to wrap it inside single quotes. 72
Just final thing to make sure, inside the section below check if the URL of your Disqus site is 73
correct. 74
Sometimes, depending where you copied this code from, instead of your site name it might say, 75
Example.disqus.com 76
ya di da. 77
If that's the case, you'll need to replace that with a short name of your site. Which you can find here 78
inside Disqus admin. 79
Under General Tab. 80
Just copy this and replace the word example with it. To create a proper URL. 81
And that's all. 82
Publish the changes and test the commenting on different blog posts. 83
Works only on the live site. Preview mode is not going to show it. 84
This was probably the most complicated plugging installation. 85
Other plugins are usually simpler than this. 86
Now that you know how to do this, all other plugins should be simple enough. 87
If you ever get stuck, ask for help on Webflow forums, community there is very helpful. 88
You can even tag me on your post to get my help too. My handle on the forums is Vako_Shvili.