In this guide, we’ll show you how to add a fully functioning blog to your HighLevel website by copying and pasting just a few lines of code.
HighLevel is an all-in-one sales & marketing platform with a built-in website building tool. HighLevel comes with a good selection of elements for adding static content, but DropInBlog can extend your website functionality with a fully working blog.
Prerequisites
You’ll need to create a DropInBlog account, which you can do for free with a 14-day trial, and you’ll need an existing HighLevel account and website.
Creating a blog page
Navigate to the HighLevel website builder by logging in, opening Funnels and Websites in the sidebar and selecting Websites. From there you’ll be able to select the website you wish to edit.
Within your website editing view click Add New Page in the top right.
Name your newly created page, I’m going with the creatively imaginative name of “Blog”. You’ll also need to set a page URL (Path), I’m going to set my page path to “blog”. Make a note of this path along with the rest of the website URL, we'll be using it later on.
Once you’ve created your new blog page feel free to add and customize the page how you see fit, taking into consideration that a list of blog posts will be inserted into the page when we add in the DropInBlog code. By default HighLevel leaves new pages completely blank, but will provide you with ways to flesh out your page in the form of Sections, Rows, and Elements.
Adding a custom code element
Within HighLevel, website page elements can be inserted into the page to add content. To add an element you’ll first need to add a Section, and within that section, add a Row. Then, within the row on the page click the Add Element button and then Custom JS/HTML from the newly opened sidebar.
To edit the code within this new element click Open Code Editor in the left-hand sidebar.
Open a new browser window and head on over to your DropInBlog account and select “Code & Layout” from the main navigation. In the Blog Code steps, copy the code shown in Step 1 and Step 2, which looks something like this:
<div id="dib-posts"></div>
<script>
var dib_id = 'XXXXXXXXXXXXXXXXXXX';
</script>
<script src="https://io.dropinblog.com/js/embed.js"></script>
Switch back to your HighLevel website and paste the code into the code editing area. Once you’ve added the code hit the “Yes, Save” button just underneath the code editing area.
Tip: You can copy or paste the code by selecting the area with your cursor and right clicking it, you’ll then be shown the option to copy or paste.
Go back to DropInBlog and select Settings from the main navigation. Locate the Blog URL field and add your HighLevel blog URL which we noted earlier. This will be your website domain followed by the page path. For example, my blog URL is https://website.com/blog/
Hit “Save all changes” in the DropInBlog settings and switch back to your HighLevel website.
Publishing your new blog
Finally hit Save in the top right corner of the HighLevel website builder. Then select Preview to navigate to your new blog page to test out your new and fully functioning blog. ✨
Tips for using HighLevel
While DropInBlog powered blogs do inherit styling from your website, you may find that you'd like to make some custom tweaks to your blog layout. The best way to do this is to use standard CSS in your HighLevel website.
To add custom CSS to a page click “Settings” at the top of the HighLevel website builder and select “Custom CSS”. From there you’ll be able to add styles to adjust the look and feel of your blog as desired.
If you still need some assistance with getting set up please do get in touch and we’ll be more than happy to help out. 🤓
Happy blogging!