In this short tutorial, you’ll learn how to add DropInBlog to WildApricot in a few straightforward and easy-to-follow steps.
DropInBlog is a fully-featured blogging solution developed for the present-day user. It combines up-to-the-minute technologies, a simple user interface, and elegant design to stay relevant in the increasingly dynamic landscape of content creation software.
On top of this, DropInBlog includes an invaluable native SEO Analyzer tool. This tool’s role is to help you follow the best current SEO practices when creating content. The SEO Analyzer, together with the remaining DropInBlog features, can make this blogging app an indispensable asset for anyone interested in building a strong online presence.
What Is WildApricot?
WildApricot is an all-in-one web platform that lets you create and manage membership sites, standard websites, subscriptions, events, and donations. Its list of clients includes mainly nonprofits, small to medium associations, and other membership-based organizations.
WildApricot is mobile-friendly and makes migration from other platforms pretty easy by allowing you to import your information via a spreadsheet file. Some of the other notable features it includes are:
- Automated membership renewals
- A customizable database
- Email automation
- Email and website templates
- An intuitive drag-and-drop editor
Can You Blog with WildApricot?
WildApricot does include a native blogging functionality, which it calls a "Blog gadget". In case you’re not sure about the meaning of this term, in WildApricot’s parlance, gadgets are essentially content blocks.
To create blog posts, you just need to add the special Blog gadget to one of your existing pages or create a brand new page reserved exclusively for your blog posts. However, as you can see in the image below, the WildApricot Blog gadget is hardly one of this platform’s strong suits.
This is literally all you get when you add the Blog widget: the ability to create posts, as WildApricot says, “to provide timely updates and information to your membership.” Needless to say, if you want to implement any type of content marketing strategy and promote your cause or business through blogging, you should be looking for a blogging solution elsewhere.
Luckily, WildApricot lets you integrate with software made exclusively for blogging – just like DropInBlog – so, we’ll teach you how to do just that: add DropInBlog to WildApricot.
WildApricot allows you to add DropInBlog even during the trial period, which, by the way, lasts for full 30 days – something that’s rare to find anywhere in the world of site builders. As far as the pricing plans are concerned, you can integrate DropInBlog with WildApricot starting with the Free plan. The Free plan, obviously, is the lowest-tier WildApricot plan and it excludes many features, but the ability to build a basic website and use the embed code method for integration purposes doesn’t seem to be one of them.
Similar to WildApricot, you can sign up for the DropInBlog 14-day free trial, and you’ll be fully equipped to kick the tires of this blogging app on WildApricot.
Now, it’s time to move to the most exciting part of this guide: the integration steps. The next section will be about the first step of the integration process: creating a new page. Let’s get to it!
Create a New Page and Configure It
Creating/adding a new page to your WildApricot site is the first thing you need to do when integrating DropInBlog with WildApricot. To add a brand new page, log in to your WildApricot account, and find the Website option on the left sidebar in your admin dashboard.
By clicking on Website, you’ll enter the WildApricot site editor. In the upper left corner of the editor, you’ll find the Add page option.
When you click Add page, the editor will show you the Page settings. Two of the available options are especially important to us: Page name and Page URL. You can give your page a name that you find suitable. We’ll call ours “Blog.” If you use the page name “Blog,” make sure to write “blog” in the Page URL field as well.
Right below the Page URL, you’ll see the Page template options. You can change the template if you want, but here we’ll stick with the default Standard template.
Now, scroll down until you see the Access Level section, and select Public. This will allow all website visitors to view the page content, i.e. your blog. When you’re done, click Save in the upper left corner to keep the changes you’ve made.
Your newly-created page is now ready for the next step.
Edit Your Blog Page
If everything went well, you’ll be able to see your newly-created blog page among the site pages on the sidebar. Select your Blog page and click the Edit button.
Next, you’ll see three options: Page, Gadgets, and Layouts. Select Gadgets, then grab the Custom HTML content block, drag it, and drop it into the body of the page, just like in the image below.
Copy the Code from DropInBlog and Paste It into WildApricot
This is the most important integration step. To start executing it, click on the Custom HTML block. This will present you with a new set of options. On the left side of the WildApricot editor, you’ll see an Edit code button.
When you click Edit code, WildApricot will show a big HTML dialog box in front of you. This is where you need to paste the few lines of integration code from DropInBlog. To copy the code, open a new tab in the browser, and log in to your DropInBlog account. Click the Code & Layout option on the navigation bar.
This will bring you to the following page:
This is the code you need to copy and paste into the HTML dialog box in WildApricot. More clearly, it looks like this:
var dib_id = 'XXXXXXXXXXXXXXXXXXXX';
Needless to say, you’ll see neither the blue line from the image above nor all those X's between the single quotation marks in the second line of the code (
var dib_id). What you’ll see, instead, is your own unique DropInBlog ID (which is why we’re not showing ours here!).
Now head back to WildApricot and paste the code snippets into the HTML dialog box.
When you click Save, your blog posts will auto-populate into the page, and you’ll see something like this:
Click the Save button, as shown in the image above, and you’re good to go with the final step of the integration.
Copy Your Blog URL and Paste It into DropInBlog
We’re almost there; just a few more details and you’ll have DropInBlog fully integrated with WildApricot.
After you save your changes, click the Public view button on the admin toolbar.
This will show you how your blog will look to your visitors. What's more important at this moment, the public view will allow you to see and copy your blog URL.
Select the blog URL, copy it, and head over to your DropInBlog account again. This time you’ll need a different page from when you copied the integration code. Click Settings on the navigation bar and paste the URL in the Blog URL field on the Settings page. This is what it looks like when we paste our blog URL:
Before you leave this page and DropInBlog, scroll down until you see the Save All Changes button. Click it to save the URL in DropInBlog and voila – you have fully integrated DropInBlog with WildApricot! Now you can blog and work on your content marketing as much as you want, knowing that DropInBlog has got your back.
Tips for Using DropInBlog with WildApricot
Add Custom CSS
One of the things you may want to do after you add DropInBlog to your WildApricot site is customize the CSS. Custom styles can help you improve your blog and site appearance even further, and the best thing is that they’re easy to add.
There are two ways to add custom CSS:
- Add new styles on WildApricot.
From your admin dashboard, click Website, then CSS, and add your code in the code editor, as shown in the following image:
Don’t forget to always save the changes you make.
- Add new styles on DropInBlog.
From the DropInBlog admin panel, go to Code & Layout and scroll down to the Advanced section on the Code & Layout page. Click Custom CSS, write your code in the indicated area, and click Save CSS.
Add the Recent Posts Widget
In addition to adding custom CSS, you can add the Recent Posts widget from DropInBlog. As its name says, it shows your most recent blog posts. You can choose the number of the posts as well as where they will be shown (on which page of your site and where exactly on the page).
In our opinion, adding this widget to your site’s home page is a pretty good idea. In fact, that’s exactly what we did in WildApricot:
As far as the procedure of adding the recent posts widget, it’s extremely similar to the integration process we described in this tutorial. The only two differences are the following:
- You don’t need to create a new page. Instead, you'll add the Recent Post widget code from DropInBlog to a custom HTML gadget on one of the existing pages of your WildApricot site.
- The code is not the same as what we copied and pasted before. You’ll find the Recent Post widget code on the Code & Layout page, under the Widget Code section near the bottom. It looks like this:
Just copy and paste these few lines of code into a Custom HTML gadget on one of your WildApricot pages, and you’ll have the Recent Posts widget added.
Hi Instead of Goodbye!
This is it. Our guide to adding DropInBlog to your WildApricot site. And despite this being the closing section of the tutorial, we’d like to think of it more as an opportunity to say hi, instead of goodbye, and welcome you to our family should you decide to use DropInBlog!
We’re here to answer any of your questions related to DropInBlog or find out more about the app. Also, if you need any help with the software, we’re here for you – we’ll be thrilled to help. Happy blogging!