 refers to their services as “Full-funnel Marketing & Sales Automation + CRM”, which essentially means a CRM that contains a marketing component. In more ways than one, SharpSpring is similar to the 

 platform — and offers standard CRM functions such as leads and forms, but they also have components like shopping cart abandonment and email marketing automation based on triggers.

Integrating SharpSpring into a website is actually fairly simple with the 

, which offers many methods/endpoints with a standard REST API. Since VIA is primarily a PHP and JS-based agency, there is a handy third-party 

 available that we use. However, for the purposes of this blog article, we are going to look at the API itself and the following example:

A web application that needs to send user data to SharpSpring as a lead and then place the lead into a custom list.

To create leads, SharpSpring offers the "createLeads" method, which can take up to 500 objects (though only 250 are recommended at once). A lead is only required to have an "emailAddress" (

When creating leads, if a lead already exists, the API will return object-level errors, which won't prevent the entire creation from failing.

So for our example, our application would send our user data to SharpSpring using the "createLeads" method and passing objects that contain "emailAddress", "firstName", and "lastName".

Once the request is returned, we will add them to our list.

Similar to the lead methods, list has the "addListMembers" and "addListMembersEmailAddress" methods.

Our team prefers using the "addListMemberEmailAddress" method since users only have to pass the email address versus the lead ID, which is a little easier to manage without keeping track of it. 

Adding a lead to a list is that easy, only requiring the lead email address and the list ID."

To note, this call is limited to 500 leads (there is no note on staying near 250 like the createLeads method).

Putting this all together in an example class, I have two methods, "createLeads" and "addLeadsToList". Both methods take an array of lead items, while "addLeadsToList" also takes the list ID.

As seen here, even without a library, the SharpSpring API is simple and straightforward to use.

As an added bonus, at the end of the script, we can output all the members from our list by using the "getListMembers" method. With this method, one just needs to pass the list ID.

Now you can create leads, add them to a list, and then output all the leads that belong to said list.

If you are looking for CRM integrations like SharpSpring or HubSpot into existing web platforms, our 

Back-end development does all the heavy lifting behind the scenes. From database design and deployment to writing application programming interfaces (APIs) to simply storing and serving your content, we’ve got you covered.

Backend Development

While we have wide and varied development expertise and experience the core of our development skill is with PHP, Javascript, Vue and React, allowing us to maintain and develop new features for 80% of all websites on the Internet. That said, we regularly explore new and useful platforms to stay ahead of the ever-changing development curve.

PHP, Javascript & React

Development

Interactions with SharpSpring

 for invoicing subscriptions to users. While FreshBooks previously met PVA needs, in the last year or two there have been numerous bouts of API downtime and a confusing API migration that led the VIA team to explore other solutions.

Knowing FreshBooks was already using Stripe for the actual payments, our development team began looking into the 

 product as a replacement service, to fully integrate into Stripe. As part of this process, we had to consider how all of the data would migrate, how we would need to implement this on the website, how we would handle prorations, and the actual rollout of all this to an active subscriber base.

As noted earlier, FreshBooks already uses Stripe to handle the payments in the backend while FreshBooks sits on top and provides the invoicing layer. Migrating to Stripe cuts out the middleman, but also involves migrating all the user subscriptions from Stripe to Stripe — sounds strange but FreshBooks organized the subscriptions in a manner that our team needed to assess and change.

High level, the first step was to create new subscription products in Stripe. Once that was completed and documented, we imported the existing customer base into Stripe so every user was at least accounted for as a customer. At this point, Stripe was populated with usable data and products.

While not necessarily falling under the migration portion, the next step required adding new Stripe-related fields to our local subscriber database and adjusting the registration process to use Stripe to process payments and invoicing.

This total process was QA'd heavily, with pages of scenarios created to address all the known possible outcomes and multiple people testing each scenario out, to account for variability.

The biggest challenge in migrating existing subscriptions into our new subscription system was doing it in a timely manner while not creating too many artifacts.

The migration can be done when a user's subscription expires, but the PVA offers yearly subscriptions in addition to monthly and day passes, so in this case the migration couldn't be completed for at least a year as waiting for subscriptions to end wasn’t possible.

In the case of yearly subscriptions, the subscription would essentially start on the day of migration and a user would receive a proration of what they paid minus what time they have already used.

For example, if a PVA customer paid $400 for a yearly subscription 3 months ago, then they’ve used 25% of it (or $100). They would be prorated $300 and then invoiced $100 for the new subscription. Again, that subscription would basically restart on the day of migration.

To prevent any sort of bug from affecting the entire user base, the rollout of the Stripe invoicing system was limited to batches of users, starting with a select ten and increasing every week by a few hundred. This process was completely automated, sending a notification a week before and migrating the subscriber to Stripe the following week, issuing the proration, and informing the user.

During the rollout, the FreshBooks invoicing system was still live, with both systems being side by side. New subscribers would be funneled through Stripe while users not in that week's batch would see no difference.

As part of any new large feature, we prioritized QA, while also knowing that it wouldn’t be possible to detect all bugs. We were prepared for this and did in fact encounter some during the rollout. However, with this batched rollout, any bug didn't affect the entire user base and we were able to fix it without major disruption.

As mentioned above, users that were to be migrated were notified a week earlier and again on migration, with a link to pay their new Stripe invoice.

We were strategic in our approach of batching the rollout, so that our support team wasn’t flooded with questions at once, but rather in timely groups. This allowed us to assist PVA customers in the most efficient way possible.

In addition to email notices, banners were placed on the website notifying users of the move from FreshBooks to Stripe, and supporting copy and documentation were written beforehand to ensure ease and organization for our support team.

Going into this migration, our team knew we were in for a challenge as the site was live and active with thousands of subscribers. All of our planning and QA'ing paid off, as we only encountered the expected minor bugs coming out of the batched release.

While the batching is still active, the project has been a success overall, as users had/are having a relatively seamless process moving invoicing systems and now the PVA has a more steady and robust invoicing system powered by Stripe.

VIA has the ability to create custom eCommerce experiences and integrate existing platforms and solutions such as Stripe, PayPal, WooCommerce, and Shopify to provide a tailored experience. 

Migrating from FreshBooks to Stripe for invoicing

In Advanced Custom Fields, there is the Post Object field that allows you to select a post resource from your WordPress website. This field can return the actual post object or the post ID. I ran into a problem where I wanted to reuse this field but with dynamic content (posts from another WordPress website). After doing some digging into the ACF code base, I found a method to make this work.

Using the existing Post Object field did not work as there is a non-pluggable function deep in that code that sets the database connection. Copying this field and tweaking it (as a new field) also doesn't work as the Javascript on the frontend is looking for that field name.

From there I moved to use the Select Field. With the Select field, there are multiple filters and hooks you can use to customize the field. For our purposes, there is a Select field with the name "external_resource". 

Using the ACF and Select2 Javascript filters, upon typing in the Select field, query the external Wordpress JSON API and return the appropriate resources (ID and title). The ID gets saved to the database and then use "load_field" hook to fetch populate the field (so it appears correctly in ACF).

First we need to setup the initial Javascript filter. Using this, we can modify the Select2 augments so it will query the external API.

Inside this, we can make sure it's the field we want to modify. From there, we can actually modify the Select2 arguments. Then we send the search query to the Search endpoint and then returning the ID and the title. 

Now that the front end portion is working, we need to get the back end ACF to work. One of the things ACF does with Select fields is verify the value of the Select field with possible values. Because of this, setting the field with dynamic choices will break ACF and leave it with a blank value.

To get around this, the "load_field" hook can be used to dynamically populate the contents of the Select field. Since only IDs exist, an additional call needs to be made to the external WordPress API to fetch the title. 

Now the Select field can populated dynamically and work both on the front end and back end with an external WordPress source.

Custom Dev

We strongly believe in open-source technologies. Our CMS of choice is WordPress, not just for its ease-of-use, but the large community that pushes its development to new and exciting places. Active in the Wordpress community, we also develop 

WordPress

Dynamic Select Fields with Advanced Custom Fields

We recently completed a website project on behalf of our partners at Foxhollow Farm to combine their separate websites for delivery and pickup orders into one. You can read more about our UX solutions and results of the project in our case study. In this journal article however, we wanted to outline some of the development solutions that made this project possible.

The biggest issue when merging two systems is that you have data in different formats in different places, even if it is being used for the same purpose. In Foxhollow Farm's case, we had product data in WooCommerce and Shopify, with additional subscription data in Shopify. VIA Studio intended to merge everything into WooCommerce; this meant we had to move all the subscriptions from Shopify. In addition, one site used Stripe, and the other one used Authorize.net. 

, we were able to set up subscriptions in WooCommerce. The plugin also offers an 

, which can import a formatted CSV with subscriber data. On the Shopify side, Foxhollow Farm was using a tool called ReCharge to manage the subscriptions. 

 offers an active subscriber export, which we used to create a CSV of all the existing data. From there, we did some data massaging to only include the fields we need to import into the Subscriptions plugin. In order to be able to bill customers again, we had to pull the client ID and payment ID from Stripe as well.

Once that data was in the WooCommerce Subscriptions plugin, the subscriptions ran seamlessly, and customers continued to have their subscriptions fulfilled with no interruption on their side. Existing subscriptions use the existing Stripe token to authorize payments while new subscriptions use Authorize.net, to match the rest of the site.

Now that both pickup and delivery products are served through one website, the normal checkout flow provided out of the box by WooCommerce is inadequate. For instance, pickup products do not have shipping, however, they have pickup times and need to be noted multiple times during the checkout flow so the consumer knows this. Another example would be that some delivery products are only available for certain zip codes and there are also instances where both types of products would be in a user's shopping cart.

With this in mind, the design team came up with single page, multi-step checkout experience that informs the user of the shipping information (pickup times, actual shipment information, etc..) and makes everything clear and concise.

VIA Studio partnered with Fox Hollow Farm in Kentucky to improve user experience on their eCommerce shop.

Fox Hollow Farm eCommerce Site

To do this, development-wise we created two different portions - the slideout cart that uses ajax to update cart amounts and products and the actual checkout template. The checkout page is able to include all the required information at page load in tabs, with validation in between each tab step. The backend contains logic for the different use cases of product types.

 to help manage orders. With it, adding new order statuses became something the Foxhollow Farm team could do, and it even has the ability to customize emails sent when the status is changed to the new status. We also customized the existing emails to better reflect the different product types and their delivery or pickup methods.

While these solutions all primarily impacted the website's backend and eCommerce and payment platforms, it is what made the task of combining two website experiences into one, consistent experience possible!

Want to learn more about this project? Check out the UX case study!

Websites are the cornerstone of marketing in this day and age. Your website is the place where you have ultimate freedom to express your brand and interact with your audience and customers how you’d like. Using agile, user-focused strategies and design, we build highly accessible, highly useful websites that meet your goals.

Websites

Development Solutions for Foxhollow.com

 is the super fast, super customizable CMS that we're using as the backend for the new 

One of the more powerful concepts that Sanity is the 

 which gives you the ability to customize how content is presented in the Sanity admin.

Let's go through the basics of how you start working with the Structure Builder.

When you first start with the Sanity Studio, you'll have a 

 file which has some basic information about your Sanity setup.

Your sanity.json file will have a section called "parts" which looks something like this:

We're going to update it so Sanity knows to look for a structure file for any customizations.

The above structure mimics the default behavior of Sanity. We have a single pane called "Content" which displays a list of all of our document types.

Now that that's in place, we can organize our content in some interesting ways!

One thing we wanted was to be able to exclude certain document type/schemas from the Sanity admin. That can be achieved by updating our structure file like this.

We've defined an array with the ids of document types we don't want to display. Then we take our list of items to display in Sanity and filter it using our exclusion array.

The last bit we'll cover is creating custom items to add to the content sidebar.

In our Sanity setup, we have a document type called "content" which is used for both 

​. Both types have a similar structure in that they each have a header image and then a large block of content entered using a WYSIWIG editor.

However it gets confusing in Sanity having all of those items lumped into a single "Content" item in the sidebar. What we really want is a sidebar item for the Blog Posts and a separate one for Case Studies.

First we get all of the documents with type "content" (this includes both Blog Posts and Case Studies).

Then we build a sidebar menu item that contains just the Blog Posts and another with just the Case Studies.

Finally, we add both of those custom menu items to our list.

HTML, CSS and Javascript form the "presentation layer" of modern web development in your mobile and desktop browser. These things together are considered "Front-end Development". The tools, techniques and standards are changing all of the time - but our development team is always staying abreast of the latest. For our partners, we do the research, experimentation and testing needed to make sure your audience has an accessible, fast, reliable experience.

Frontend Development

Dive into the Sanity Structure Builder

One of the biggest challenges of moving from one CMS to another is getting your existing data to the new platform. In our case, we were moving our existing WordPress platform, which had been around for years, over to the 

 platform. At a high level, this involved getting the data out, transforming the data into something Sanity could read, and then actually importing it.

The first step was to get the actual data out of WordPress. You can achieve this with many different methods, but because the overall process was over the course of weeks and the content would change, I went with creating a custom plugin. This plugin would grab all my data, transform (which we will talk about later), and spit out a file that could be imported by Sanity.

To make this easy, the plugin made use of 

, which gives your Laravel classes for your WordPress objects. Using Corcel, I'm able to make changes to the different Wordpress object attributes and grab those attributes. For instance, let's say in Sanity I have a post published field which format is different than the published date in Wordpress. I can modify that published field in my class and then anytime I grab it will be Sanity ready.

In all my Corcel classes, I have an export method that grabs all the needed data and throws it into an array. In the main plugin class, I loop thru all my Corcel classes and call that export function, which then gets added to an array holder. That array holder then gets thrown into a ndjson (newline delimited JSON) file that gets downloaded.

There are two big elephants in the room - shortcodes and Portable Text. With shortcodes, the question comes up of how do we deal with content in shortcodes and how do we mimic that styling in Sanity. With portable text, how do we get the Wordpress object content (so our blog post content) in the portable text format that Sanity uses? At the time of this writing, there is not a PHP library that converts HTML to Portable Text (there are libraries for other languages).

The concept I came up with for dealing with shortcodes was to convert the shortcode into a custom HTML element that contained all the data I need, either as attributes or as inner content. Then when that gets converted over with Portable Text, we have a custom deserializer for that element. Now we have all that content and still get to format it separately.

For example, let's say I have a custom shortcode called "intro" that has one attribute called "color" and has content that lives inside of it. In my BlogPost class, I am modifying the content attribute and looking for my intro shortcode. Once I've found a case of that shortcode, I'm going to replace the actual shortcode ([intro]) with a custom HTML element called "<intro>". I'm going to grab the color attribute and content as well so I'm left with

That would replace the shortcode in my BlogPost content and later on I can use a custom deserializer to convert that into my intro Sanity block (we will talk about that later).

For a real-world example, we used the gallery shortcode in our blog posts. The gallery shortcode contains the "ids" attribute which is just a string of IDs of the images that it will grab. Looking over to the Sanity side, while we don't have a gallery block, we have  row/colum and image blocks, so we will want to convert the shortcode into something like this

Just like before, we look for our gallery shortcode in the blog post content. Once we find it, we grab the IDs attribute, fetch images for those IDs, and then remove the shortcode and replace it with the above code. On the Portable Text side, the default deserializer can handle image, so we just have to write a custom portion to handle the row tags.

 We do this process across the board for all the shortcodes we want to keep. Wordpress offers a handy function that will spit out it's shortcode regex, so we use that to grab our shortcodes.

From there we want to specific what shortcodes we want to keep, loop over those shortcodes, use the regex to find those shortcodes, and then do our content changes. 

At the time of this writing and when we did this data transition, there was not a HTML to Portable Text PHP library (the inverse is available). However, there is a Node.js library for this in the 

. What we did was set up a Node server with 

 running that accepted HTML (base64 encoded) and returned Portable Text. In this, we also had our custom deserializers for our shortcodes.

Now that our data has been exported and transformed, we can import the ndjson file into Sanity. To do this, use the 

. The tool will import images into your Sanity Media and will not timeout. With the "--replace" flag, it will overwrite existing documents, which is useful your doing testing.

At this point your data is now migrated. For us, it took a couple of imports to get it where we wanted it at, but in the end it worked out well.

Wordpress to Sanity Data Script

For today’s example, we’re going to show you how to easily create a new DynamoDB table.

This will let you run authenticated AWS commands with 

The easiest way to create a new table is by passing a JSON file with the table schema to the AWS CLI tool.

 to get an idea of all the available options.

You can also use the following command to view the schema of an existing table if you’re going to create something similar:

aws --profile=via dynamodb describe-table --table-name=MyTable

(Note: You won’t be able to use the exact output above to create a new table. First, you’ll have to remove any “Arn”, “Size”, “NumberOfDecreasesToday”, “Count”, and date/time attributes.)

Here’s a sample schema which creates the table 

Once you have the JSON schema, creating the new table is super simple.

aws --profile=via dynamodb create-table --cli-input-json file://Items.json

That’s all there is to it. Now go take a look at

We are experts are specifying, designing and implementing the hosting setup your website, app or database needs. 

Hosting

Creating an AWS DynamoDB table from the command-line

 – All our migration scripts have been open sourced for you to use to convert your SVN repositories to Git. Fork them from 

Here at VIA Studio we recently switched our source control from SVN to Git. This is something we wanted to do for a while. But with over 100 SVN repositories, the switch seemed daunting.

About a year ago we began using Git for a few new projects. While this allowed us to become familiar with Git, it made the development process more complex. Which projects were Git? Which projects were SVN? We knew we wanted to use Git. It was time to rip the Band-Aid off and 

Our only requirement for converting from SVN to Git was to keep history. We wanted all of our commit information in the new Git repository. If you don’t care about history, you can simply run 

 inside your SVN working copy and remove the 

I did a lot of Googling and found a few invaluable posts for converting SVN repositories to Git repositories. While I didn’t follow his steps, 

 helped me understand the process overall. Converting SVN to Git had also been 

. It allows Git actions against an SVN repository. One is 

, which converts history and has additional options, such as converting tags and branches. While very powerful, 

 focuses solely on converting an SVN repository to Git. So the configuration options were more straightforward. And since 

 the location of the SVN repository and a file with author information:

svn2git svn://somerepo --authors authors-file.txt

You may need to tweak the options based on your repository. In our case, repositories were in standard SVN layout. However, everything existed under the 

 branch and we did not use tags. So we passed the 

svn2git svn://somerepo --authors authors-file.txt --notags --notrunk

The authors file was the most important piece. It must follow the format 

 for Git to properly convert history. I ran the following script against a few of our older, larger SVN repositories in an effort to get all of our author information.

svn log -q svn://somerepo | awk -F '|' '/^r/ {sub("^ ", "", $2); sub(" $", "", $2); print $2" = "$2" <"$2"@viastudio.com>"}' | sort -u >> all-authors.txt svn log -q svn://someotherrepo | awk -F '|' '/^r/ {sub("^ ", "", $2); sub(" $", "", $2); print $2" = "$2" <"$2"@viastudio.com>"}' | sort -u >> all-authors.txt sort -u all-authors.txt > authors-file.txt

I then went through the file and corrected the names and emails. For former employees, I linked to their GitHub account. For those that did not have a GitHub account, I entered their name and used a placeholder for their email.

Nearly all of the errors I encountered during the conversion process were due to missing author information. If you pass the option 

 it will provide more detail – in this case what author information is missing. You can add it manually to your authors file or keep this script handy to rerun.

After successfully converting a few of our larger repos, it was time to automate the conversion for all of our SVN repositories.

I wrote a few scripts to convert the repository from SVN to Git and push the code to GitHub. The script accepts a file listing all the repositories to convert. I shared 

. Additional details can be found in the project 

. I encourage you to use this script as a base and adjust the conversion process as needed. Once ready, you can convert any number of repositories by running:

It took roughly 4 hours to convert 100 local SVN repositories of varying size and history.

After the projects were converted we noticed a few things we also wanted to change. For example, adding 

, and removing SVN related files. We used 

 as a base to create the other scripts (also available on GitHub).

Most of our projects use a similar codebase (WordPress). As such, we took the opportunity to standardize the 

 file by combining those provided by the 

 from some SVN repositories with the following command, modified from 

svn pg -R svn:ignore svn://somerepo | sed 's#svn://somerepo##g' | sed 's# - #/#g' | sed '/^$/d' > .gitignore

We had a few repositories that did not follow the standard SVN layout. Specifically repositories with multiple projects as sub-directories. I tried 

git svn clone svn://somerepo/project/dir/ --no-metadata --authors-file=../authors-file.txt --no-minimize-url

Taking a step back, I’d like to review our decision to convert from SVN to Git. SVN and Git are both excellent source control management tools. I do not wish to take sides on which is 

. For VIA Studio the bottom line is SVN had become painful. Checksum errors and merge conflicts were a daily hindrance to the team. The promise of Git finally drew us in.

 We chose to back our Git repositories with GitHub. GitHub provides a central location and backup. But since our repositories are private, we required an expensive plan. There are dozens of other cheaper services out there (bitbucket, gitlab). So why pay GitHub’s higher pricing?

. GitHub has the most features: an excellent user interface, project wikis, organizational controls, service hooks. GitHub is also incredibly popular. Not only was most of our team familiar with GitHub, but so is the rest of the development community.

Git also gave us the opportunity to evolve our development process. We adopted more complex branching models (current using 

). We added code reviews during Pull Requests. We improved our continuous integration with service hooks and Jenkins.

It’s been about a month now and we haven’t looked back. From a technical perspective, this is the largest migration we’ve done in years. From a business perspective, Git opened new doors and gave the team a fresh outlook. That’s invaluable for our future.

Migrating from SVN to Git

Even though RSS has been around for ages now, people have a difficult time understanding it’s power and simplicity. This is the best video I’ve seen describing RSS in a non-technical way. Check it out and enjoy! RSS is a component of almost every Content Management System out there these days, and can be useful to anyone who enjoys reading content from multiple sites. If you own a website and are hoping to increase readership and traffic, RSS is an effective way to do so.