Adding Dropkiq to a Ruby on Rails Application in 15 Minutes

Today, I’m going to be integrating Dropkiq into a RoR application called PartnerHQ.

PartnerHQ, https://www.partnerhq.com/, is “collaboration software that enables event hosts to reach the highest levels of partner engagement and co-promotion”. Basically, this is an application where event hosts, people who run events such as Railsconf, can manage their event partners, such as a Sponsor, Speaker, etc. When one of these partners logs in, they see exactly the right information they need to understand their role to make the event a success for themselves and for the event host.

Liquid is used in PartnerHQ in several different ways. One way that it is used is for event hosts to write social “templates”. In other words, these are pre-written tweets, facebook posts, emails, etc where the partner simply copy-pastes the content. This way, the event partner is able to promote the event with the exact right messaging without having to think about it! These templates support Liquid so that the event hosts can make the post content dynamic with their event data. An example tweet might be:

‍

Don't miss your chance to attend Example Event! There are only {{event.number_of_days_until_order_deadline}} days left to register at http://example.com.
‍
‍

As you can see, every day that we get closer to the event, this example tweet will dynamically be updated to have the correct number of days until the event to create a sense of urgency with potential event attendees. So, when a partner logs in, they may see the tweet as this (once rendered by Liquid):

‍

Don't miss your chance to attend Example Event! There are only 7 days left to register at http://example.com.

‍

Now that we understand why we are using Liquid in this RoR application, let’s add Dropkiq in less than 15 minutes to enhance the end-user experience. By the way, we’re basically following the directions from the official Dropkiq Documentation.

‍

Step 1: Install the Gem

Add the following line to your `Gemfile` under the development dependencies:

	gem 'dropkiq', "~> 0.1.11", git: "git@github.com:akdarrah/dropkiq-gem.git"

‍
Run bundle, and then run bundle exec rake dropkiq:schema. This will create your db/dropkiq_schema.yaml file, which will be used by the Dropkiq Javascript library as your `schema`. Look for any “CHANGEME” references in the file and replace them with the correct data type.

‍

Step 2: Install Dropkiq UI

PartnerHQ uses Webpacker Gem, so we’ll be using Yarn to manage our Javascript dependencies. We’ll run yarn add dropkiq-ui to install Dropkiq into our application. Then, add the following code to your app/javascript/packs/application.js file:

import 'dropkiq-ui/dist/dropkiq';
var { DropkiqUI } = require('dropkiq-ui');
window['DropkiqUI'] = DropkiqUI;

One thing to remember, make sure you’re importing stylesheets in your application’s layout file:

= stylesheet_pack_tag 'application'

Step 3: Integrate in Rails View

Now that we have our schema and DropkiqUI installed, we can now add it to our Rails view that we want to enhance with Dropkiq. There are two steps involved in this.

First, let’s pass our dropkiq schema data structure from the backend to the frontend. Add this code to your controller:

class ExamplesController < ApplicationController  
 before_action :load_dropkiq_schema  
 # ...

 private 

 # ...  
 def load_dropkiq_schema    
  gon.dropkiq_schema = YAML.load_file("#{Rails.root}/db/dropkiq_schema.yaml")  
 end
end

Next, let’s initialize the DropkiqUI library on our frontend code. In my case, there is a textarea on the page that has the ID of “template-body”. So, my frontend code ends up looking like this:

 // Load the dropkiq_schema.yaml file (Required)    
 var schema = gon.dropkiq_schema;    

 // Declare data the user has for this document (Required)    
 var context = {      
  event: {        
  type: "ColumnTypes::HasOne",        
  foreign_table_name: "events"      
 },      
 partner: {        
  type: "ColumnTypes::HasOne",        
  foreign_table_name: "partnerships"      
 },      
 organization: {        
  type: "ColumnTypes::HasOne",        
  foreign_table_name: "organization_partnerships"      
  }    
 }    

 // Add test data for previewing (Optional)    
 var scope = {    
 };    

 // Get a licenseKey from https://dropkiq.com (For Pro Version)    
 var licenseKey = ""; 

 new window.DropkiqUI(document.getElementById('template-body'), schema, context, scope, licenseKey);

‍
And with that, we have Dropkiq integrated! There are a few things we could do to continue to enhance this experience, but we’ve already vastly improved our Liquid editing experience for our customers with minimal effort and time.

Remember, if you’re implementing Dropkiq in an application that is not for Ruby on Rails, the process is nearly identical. The main difference is that you will need to create your schema data structure manually, which should not take a lot of time for most applications.

Do you want Dropkiq, but need help getting it implemented in your application? If you need help, you can always reach me at adam@dropkiq.com.