Drag-and-drop interface components

with Hubspot CMS

Some background information: As a workflow platform, Trivie uses adaptive learning, cognitive science, and proven gamification techniques to help employees remember their training information.

What was done: a template was made for landing pages in Hubspot

To begin with, a template was made for landing pages in Hubspot. A component was developed with the Javascript and HUBL language on the Hubspot platform for the templates of the Pages model with the following functions:

Selection of KPIS:

This component allows the client to dynamically create a set of items (KPIs) from the Hubspot CMS so that the end user can select them according to their needs. Each item has different options, such as a title, description, color, and a logo that identifies it.

Drag-and-drop functionality:

A drag-and-drop functionality has been implemented in the component so that the end user can organize the KPIs or elements into two lists by simply dragging each item to the appropriate list according to its projections. Moreover, the user can interact with each element by entering important information into the built-in field and modify the list as needed.

Download as .pdf file:

A feature has been integrated to download the selection of KPIs made by the user in PDF format, with a previous validation of a door for email.
How the experience enriched Quo as an agency: Our experience was enriched, especially regarding the landing page, which was made with the KPIs and the drag-and-drop functionality. This project showed us how far we could test the limits of Hubspot, how custom implementations could be made on the platform, and how we could expand the possibilities of landing page design and functionality. Nowadays, we can create great landing pages with complex functionality and explore beyond what can normally be done with Hubspot.
Video frame
About us
Support Quo team member headshot
Let's work together
Contact us
arrow icon
We can help with...
UI/UX design
Web development
CMS integration
AB web experimentation
Web and mobile apps
Illustration and animation
Marketing print design
Record to eBook workflows
Remote video production
Color grading
Remote crew assistance
Video and audio editing
Long to short video extraction
Product photo and video
Landing pages creation
Recurrent web maintenance
Packaging design