 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 

Backend Development

PHP, Javascript & React

Interactions with SharpSpring

The old viastudio.com website launched nearly a decade ago atop of Wordpress - our go-to custom website development platform. 

But much has changed in those ten years in web development - and the goals we had for the

We wanted something that would create a unique, elegant, interesting user experience, delivered "scary fast"  - that was also easy to develop and maintain.

We love Wordpress - it has been and remains our go-to for custom website development. In order to achieve our user experience and development goals for the 

, we found that they aligned closely to the offerings of the JAMstack: static markup, delivered fast and enhanced with Javascript. This is commonly known as a "headless" content management system (CMS).

There are many JAMstack CMS options- including using Wordpress in a "headless" mode. But would that fit our needs?

Read How We Customized the Sanity CMS

The biggest challenge was moving our data from WordPress to Sanity, mainly our blog posts going back years. Fortunately, we were able to write a tool using PHP and Node to convert all of our WordPress data into a format that we could import into Sanity.

Read About Our How We Migrated Our Content

For a framework, we had two main options: Gatsby and Next. For me, the choice was easy. While Gatsby offers a theme and plugin ecosystem that resembles Wordpress’s in some ways, Next’s ability to dynamically work as a static site generator or a server side rendering framework on a page-by-page basis is a huge win. We had recently tested it out on our 

 and were immediately impressed. In the time since that project, Next has rolled out features like the incremental static regeneration which means that we can generate our featured case studies at build time, generate additional case studies at runtime when they are requested and also create server-rendered landing pages that can take advantage of A/B testing, cookies, etc.

Next also introduced API routes, which means instead of relying on a full custom server for things like form handling, we can just create a file at “api/form,” and Next will generate an API endpoint for us where we can run server-side code while doing everything else on the client.

Using a React framework also enabled us to take advantage of libraries like Framer Motion, which provides physics-based animations that give layout changes a more natural, playful feeling than duration-based CSS animations.

Vercel was our first choice for hosting because it supports Next out of the box as it is built by the same team. But more than that, they provide a great development experience. We have our project set up as a monorepo, for which Vercel recently rolled out support, which means our CMS and frontend are two separate packages that we host in one repository, and they each have their own project in Vercel with continuous integration through Github. Any time we open a PR for one of the projects, Vercel creates a preview deployment where we can view all the changes just how they will appear in production, and when we merge it into our “main” branch, a new production deployment is created. And if anything goes wrong, we can easily roll back to a previous deployment.

While we always work closely with the design team throughout the development process on a project, we often don’t get involved until fairly late in the design process. For this project, the goal was for design and development to collaborate on the design system and build it from the ground up, with an emphasis on componentization, since we knew we would be building the site with React.

Before design even got started, we got to work on the foundation of the design system. Inspired by the layout primitives in Andy Bell and Heydon Pickering’s Every Layout, we created React components for basic layouts that can be truly modular and intrinsically responsive, so we could use them all throughout the site. My favorite is The Switcher, which switches directly from a row to column layout with no breakpoint and no awkward in-between wrapping states with orphaned items.

To help with testing these primitives and collaborating with design, we built our components in 

, which enabled us to isolate components, visualize variants, and test responsiveness and accessibility. With this workflow we could develop layout primitives individually and share them with design; then design could construct layouts with these primitives in mind and hand back components, we could build those in Storybook and have them reviewed and incorporated into full page layouts, which we could then build in our Next.js app. This workflow brought design and development much more in sync and enabled a more efficient back-and-forth compared to a more standard hand-off where development begins after design has already completed the full page layouts.

The most exciting thing about our new site is what’s yet to come. Moving to a modern stack has opened the doors to all kinds of new ideas and experimentation. We’re only restricted by our imaginations.

We are extremely proud of what we were able to build and are excited to continue work on improving the site for our employees, clients and friends over the coming years.

Frontend Development

Custom Dev

Developing the New via.studio

Web Design

Illustration

UX / UI

Celestial Bodies of the Past Present & Future

Branding

Non-profit Marketing

Graphic Design

Art Direction

Louisville Institute

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

PHP, Javascript & React: Case Studies

01

Celestial Bodies of the Past Present & Future

02

Louisville Institute

PHP, Javascript & React: Blog Posts

Interactions with SharpSpring

Developing the New via.studio