How to Create a Blog on WildApricot

In this short tutorial, you'll learn how to add DropInBlog to WildApricot in a few straightforward and easy-to-follow steps. 

On top of all 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, makes 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 mainly includes nonprofits, small to medium associations, and other membership-based organizations. 

WildApricot is mobile-friendly and makes migration from other platforms rather 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 on 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, according to WildApricot, 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.

Essentially, all you will get when you add the Blog gadget is the ability to create posts. WildApricot insists this enables you “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 look elsewhere for a proper blogging solution. 

Luckily, WildApricot lets you integrate with software made exclusively for blogging – like DropInBlog – and we’ll teach you how to do just that. Let’s see just how easy it is to add DropInBlog to WildApricot.

Prerequisites

WildApricot will allow you to add DropInBlog during the trial period, even if you haven’t yet paid for a plan. The trial period lasts for a full 30 days, which is actually quite 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 is the lowest-tier WildApricot plan, and as expected, it excludes many features. 

Luckily, the ability to build a basic website and use the embed code method for integration purposes isn’t one of the missing features.

Similar to WildApricot, you can sign up for the DropInBlog free trial, and you’ll be fully equipped to kick the tires of this blogging app on WildApricot. Now, let’s move to the most exciting part of this guide – the integration process.

Whitelist DropInBlog Domains

Important: You must do this step or your blog will not work!

WildApricot requires you to whitelist any 3rd party domains. It's quite easy, and is essential for your blog to work. 

1. Simply follow these instructions to whitelist our 2 domains
2. When prompted enter these two domains exactly like this:
   *.dropinblog.com
*.dropinblog.net

Create a New Page and Configure It

Creating or 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.” Make sure to write whichever name you choose 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 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.

Edit Your Blog Page

If everything goes well, you’ll be able to see your newly-created blog page among the site pages on the sidebar to the left. 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. Click on the Custom HTML block, which 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:

Step 1:

<script src="https://io.dropinblog.com/embedjs/XXXXXXXXXXXXXXXXX.js"></script>

Step 2:

<div id="dib-posts"></div>

It’s worth noting that you won’t see the XXX’s in the Step 1 code; instead, you’ll see your own unique DropInBlog ID.

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 and copy the blog URL, then 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 on WildApricot 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 to customize the CSS. Custom styles can help you improve the appearance of your blog on WildApricot even further, and the best thing is that they’re easy to add.

There are two ways to add custom CSS to your blog on WildApricot. The first one is to:

• 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.

The second method to add custom CSS is to:

• Add new styles in 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 the name suggests, it shows your most recent blog posts. You can choose the number of posts as well as where they will be shown – on which page of your site and where exactly on that 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:

1. 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.
2. 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 hello, instead of goodbye. 

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!