Client Background & Requirements
Our client VirtualKEY has developed a SAAS product that is a Home Automation Platform. It is featured in the Top 10 Startups of Chicago, USA.
The website to be developed was targeted for two kinds of audiences: Property managers and Vacation Rentals.
The product helps owners remotely operate doors, entrances, elevator, intercom, garage door & swimming pools.
VirtualKEY integrates over 200+ smart devices of more than 35+ brands.
The client wanted us to develop a website that showcases it as a single platform for all home automation needs.
How did we provide solution?
We worked out on the project as follows:
- We created a hero section that will have a featured video, tag line & short description of the product.
- We created a section that showcases Smart Device Categories that Virtual Key Supports like Doors, Elevators, Entrances Pools etc..
- A section that showcases the brands they support in a carousel format.
- This is followed by a contact form section.
- We added sections that depict the various features of the product.
- We split individual sections into one or more columns such that the feature can be explained with text and supporting content like Image, Gif or a video.
- We created a different section for each smart device type.
- It showcases the logos of the brands, VirtualKEY supports in the said category.
Verify Compatibility Form Functionality
- The client asked us to develop a custom functionality where people can check if their device is compatible or not by providing their device model number.
- We developed a custom plugin which will display a form and will have fields like Name, Company Name, Email & Device Name.
- We created a Device Custom Post type(CPT) that has fields like the brand, device type, featured image & brand logo image.• We created a Device Custom Post type(CPT) that has fields like the brand, device type, featured image & brand logo image.
- The Device Name text field which will have autocomplete functionality. When user types, an AJAX request is sent and matching device entries are fetched from the database & displayed here.
- Once the user inputs these and clicks on submit, the user is shown the results.• If the device exists in the database, the user will be shown the result as: “Yes, We are Compatible” message with a ThumbsUp Icon, Device Image & Brand image else a Thumbs Down image with a message ” Sorry, We aren’t compatible Yet”.
- Every time a result is displayed an AJAX request is sent such that each entry is captured and inserted in the database.
- We created session variables such that the inputs made by the user for Name & company will remain as auto-filled for the ongoing session.
- To be able to export all form entries from the dashboard, we created an options page in the WordPress Backend from where the user can select a date range and corresspnding entries in that date range are exported in CSV format.