How to Create a Blog on WildApricot

Zoran Zoran
10 minute read

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 tool called SEO Analyzer. 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 the following:

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

WildApricot built-in blog gadget

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

Prerequisites

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 an example site 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 already 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.

WildApricot dashboard website

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.

WildApricot add page

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.

WildApricot page name URL

Right below the Page URL, you’ll see the Page template option. You can change it 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.

WildApricot access level public

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.

WildApricot blog page edit

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.

WildApricot gadgets custom HTML

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.

WildApricot edit code

When you click Edit code, WildApricot will show a big 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 the DropInBlog account you created earlier. Click the Code & Layout option on the navigation bar.

DropInBlog code and layout

That will bring you to the following page:

DropInBlog code step1 and step2

This is the code you need to copy and paste into the dialog box in WildApricot. More clearly, it looks like this:

Step 1:

<script>
var dib_id = 'XXXXXXXXXXXXXXXXXXXX';
</script>
<script src="https://io.dropinblog.com/js/embed.js"></script>

Step 2:

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

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 open dialog box.

DropInBlog code snippets paste code WildApricot

When you click Save, your blog posts will auto-populate into the page, and you’ll see something like this:

DropInBlog on WildApricot

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.

WildApricot DropInBlog public view

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 get and copy your blog URL.

WildApricot 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:

DropInBlog settings paste 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 adding custom 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 in the following image:

WildApricot custom CSS

Don’t forget to always save the changes you make.

  • Add new styles on DropInBlog.

From the 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.

DropInBlog custom 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:

WildApricot recent posts DropInBlog

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. In the widget’s case, you don’t need to create a new page. Instead, as we mentioned earlier, you add the code from DropInBlog to one of the existing pages of your WildApricot site.
  2. The code is not the same as the one we copied and pasted before. You’ll find the widget code on the Code & Layout page, under the Widget Code section near the bottom. It looks like this:

DropInBlog widget recent posts

Just copy and paste these few lines of code in WildApricot, 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.

Get started embedding a blog into your website right now

Try It For Free