Integrating DailyStory and WordPress

WordPress is a great CMS, but the best thing about it is the simplicity.

When I set out to launch www.dailystory.com WordPress was a natural choice because I also wanted to build integration between DailyStory and WordPress.

Part of the premise of DailyStory is to manage people through the customer journey. That process starts with either manually adding contacts into DailyStory or, using mobile and web forms, capture them when they are “in the moment”.

Make it simple

DailyStory has the ability to create landing pages. We actually took an approach that will be familiar to users of WordPress. For example, you can create templates, create pages and then use templates to control common look-and-feel of pages. Next, you can create web forms and embed them in any page or template.

But, we didn’t want our landing pages to be the only choice for our customers. We also wanted to make it easy for other platforms, such as WordPress, to easily use DailyStory forms and content too.

One of the things that drove me crazy with some of the other marketing platforms I used is that I had to run all forms outside of WordPress and I lost control of the design.

In addition to supporting WordPress, web forms can also run as standalone embedded iframes, use the API, or you can build your own web forms and push data into DailyStory.

We’re also looking at ways we can partner with some of the great platforms dedicated to landing pages that some of our customers are using.

Enter the WordPress plugin for DailyStory

Let’s look at how easy it is to add a web form to a WordPress site – the example I’m going to show is how I added the “Contact Us” form on www.dailystory.com:

The first step is to create a form in DailyStory:

DailyStory Web Form Designer

When I created the web form I first selected a campaign (not shown). The campaign controls the routing of the information when this form is completed. Next, I built the form using the designer (screen shot above). I added 4 fields and set all of them to required.

The web form designer also supports drop downs, drag drop sorting, etc., but we’ll save that for a future article.

A couple important things that aren’t shown:

  • Web forms are progressive. This simply means that if someone has completed a field previously, such as company name, we don’t ask for the same information twice (smart, huh?)
  • Support for Google reCAPTCHA. If Google reCAPTCHA integration is enabled in DailyStory, reCAPTCHA is available for all web forms. Adding reCAPTCHA is a must for preventing bots!

Note the Web Form ID (upper right in the screen shot), we’ll need that again in a minute as we use that along with the Daily Story Site ID (set in the WordPress plugin) to get the web form.

Install the WordPress plugin

Open up WordPress, go to the admin dashboard and select Plugins. Search for the DailyStory plugin (hosted on www.wordpress.org) and install and configure it:

WordPress plugin for DailyStory

More directions on how to do that can be found here, so I’m not going into detail about that in this post. We’ve also published the source code on GitHub/DailyStory if you want to see how this plugin is built.

Once the WordPress plugin is installed, you can create a new post or page and format it however you want. For the DailyStory website, we’re using Bootstrap to control the web and mobile layout.

Next, wherever I want the “contact us” web form to appear I add the following WordPress shortcode using the web form ID from above.

[ds-webform id="83j47"]

When the page is published and viewed what you’ll see is the form displayed within the WordPress post or page (see it live):

Contact Us WebForm in WordPress

The nice part about this is I can make changes, run variations, and more all managed by DailyStory. But, I can also use CSS within WordPress to control the look-and-feel.

It’s worthwhile pointing out that page is pure HTML. There is no JavaScript or iframe required to display it. It’s also fully mobile friendly.

That is how I built the Contact Us page and the newsletter sign-up. When someone completes either form it takes their contact information, redirects to a thank you page and in the background starts the workflow associated with the campaign.

The workflow can do anything, but in this case it:

  • Sends an auto-response confirmation email (which also checks if the email address bounces or not).
  • Posts an update to our internal sales channel (running on Slack).
  • Sends an email notification to the sales team that there is a “contact us” request to follow up on.
  • For the newsletter workflow, the email address is verified and added to the subscriber to our MailChimp newsletter.

We have more planned for WordPress, including integration with DailyStory Popup Offers.