Voog is an excellent platform for creating complex custom solutions, but for the end-user, managing content via a user-friendly UI remains easy. Should the end-user have any issues, Voog’s support team is happy to provide assistance.
How do websites work in Voog?
The design consists of Liquid-enhanced HTML templates, CSS, JavaScript, and other assets. Every page is rendered into a template, selected by the site admin based on their requirements. The templates contain areas for interactively adding content to the page (text, galleries, maps, embeddable code, forms and more).
The API can be used to add metadata to any object (site, pages, articles). For example, the metadata may control styling options, e.g. background image or colors. As such, the website can be easily styled without ever changing the code.
The API can be used to add metadata to any object (site, pages, articles). For example, the metadata may control styling options, e.g. background image or colors. As such, the website can be easily styled without ever changing the code.
Why should a developer choose Voog?
Voog is easy and flexible. A developer works on the same code that is rendered to the website visitor – HTML, CSS and JS. Liquid is used to enrich the HTML code and make templates more dynamic. The code can be separated into smaller components, which can then be re-used.
A developer gets full access to the entire website's HTML, CSS and JS code. One way to edit the source code is via the built-in code editor.
Voog’s database tool adds flexibility
The database tool provides record-based storage to developers. It can be used to create catalogs, which contain elements, e.g. events, publications, forms etc.
The project portfolio on Kauss' architects website is built using Voog database tool.
Developers first create a data model for a new catalog, which consists of fields of fixed data types (text, number, float, image, date etc.) The catalog may be attached to a form on the front end, used by the site editor for inserting and modifying data. The rendered form can then be served to visitors—every filled form (= database row) has its own unique URL.
Data can be filtered to create concise lists in addition to detailed forms. For example, a page can display a list of employees; on clicking on one of the names, a more detailed form is shown.
Read more on how to get started with the Voog’s database tool.
Data can be filtered to create concise lists in addition to detailed forms. For example, a page can display a list of employees; on clicking on one of the names, a more detailed form is shown.
Read more on how to get started with the Voog’s database tool.
What can a developer do with Voog?
The most common use case is a static webpage. Voog can be used to create simple webpages, product catalogues, so-called one-pagers, web stores and more. Voog can be used for everything, as long as customer accounts or creating a large webstore aren’t required.
The functionality of Voog has been made as easy and understandable as possible for the page visitors and admins. This is why many webstores with limited technical knowledge use this platform. When creating Voog, we wanted to make the system intuitive to use, unambiguous and durable. Thanks to this most clients are very happy with our product.
Although the webstore functionality in Voog is somewhat limited, it is made to be as simple as possible for the administrator and the customer. Many successful small stores use Voog to their satisfaction. It may not be as flexible and expandable as some other services, but for some stores, simplicity and ease of use are the key factors.
In case the store owner wishes to change the e-mails and invoices sent to the customer, we have made our base e-mail templates publicly available. These use the same Liquid-enhanced HTML as the site layouts. After modifying the e-mails or invoices, these can be pushed over the API and enabled—subsequently all e-mails sent to the customers will use personalized templates.
The functionality of Voog has been made as easy and understandable as possible for the page visitors and admins. This is why many webstores with limited technical knowledge use this platform. When creating Voog, we wanted to make the system intuitive to use, unambiguous and durable. Thanks to this most clients are very happy with our product.
Although the webstore functionality in Voog is somewhat limited, it is made to be as simple as possible for the administrator and the customer. Many successful small stores use Voog to their satisfaction. It may not be as flexible and expandable as some other services, but for some stores, simplicity and ease of use are the key factors.
In case the store owner wishes to change the e-mails and invoices sent to the customer, we have made our base e-mail templates publicly available. These use the same Liquid-enhanced HTML as the site layouts. After modifying the e-mails or invoices, these can be pushed over the API and enabled—subsequently all e-mails sent to the customers will use personalized templates.
Stella Soomlais' webshop is built using the Voog database tool.
What makes it easy to develop on Voog?
Developers can choose their own tools. To get started, Voog has a built-in code editor. The next step would be to use the Voog Kit command line tool, enabling pulling and pushing site content. Combined with any version control platform (Github, Bitbucket, etc.), this has usually been enough for our partner agencies. Any language that transpiles into JavaScript can be used to build a website in Voog. The template code can be separated into smaller components to keep the code balanced and have a good overview of everything.
What are the advantages of using Voog compared to self-hosted CMS?
It works the same way for everyone – no need to worry about security, external apps, version conflicts or other such nuisances. When Voog is updated, the improvements automatically apply to every page. Voog does not have strict rules on how to build a website – the developer has control over the final result. Voog’s default themes are a good baseline and these can be freely expanded or even re-worked completely. You can even start from scratch and completely write your own HTML, CSS and JS.
Take a look at the source code of Voog’s latest design Nuuk in Github to get a good understanding of how the source code of a site developed on Voog looks like.
In addition, as Voog is a cloud service, it offers faster and more thorough customer support than a self-hosted CMS application. Customer service can quickly identify and hopefully rectify any problem.
Is it possible to connect external data sources or authentication systems?
Short answer—it depends.Long answer—based on the intended use case. For example, requests to an external API can be made and the responses used as needed, i-frames can be inserted and more. When authentication with a private key is needed, then this cannot be done in the front-end and an external intermediary application is needed. We have previously used Heroku apps for this scenario. Many websites that receive content from some other source or send information elsewhere use this method. Voog’s exhaustive API provides an endpoint for external applications. We also have initial webhook support in the e-commerce module. A limitation is that back-end integrations and server plug-ins on Voog side cannot be used as the back-end is not open to developers.
Conclusion
The strengths of Voog as a development platform
- As a developer, you have full access to the site’s entire codebase.
- You work with practically the same code that gets served to the visitors.
- Easy multilingual website support – the same design can be used for multiple languages.
- Voog is a cloud service, meaning that you will always use the latest version, so you don’t have to worry about version updates or security issues.
- Voog provides user support and as a developer, you don’t need to assist the user.
- You can build your website from scratch using HTML, CSS and JS or use Voog’s default layouts as a base. These are available from public repositories.
- Code can be modified using the built-in code editor and pushed / pulled using the Voog Kit command-line tool.
- You can use any development language that transpiles to JavaScript.
- Liquid markup can be used to add dynamic elements to otherwise static HTML pages.
- The code can be broken down into smaller components, which can be reused in multiple layouts.
- Voog has a built-in database tool for creating catalogs of elements.
- Voog’s API can be used to add metadata to site’s objects and much more.
- Voog’s e-commerce module provides the option to easily create a single-region webstore (multiple region support is in development)
When can Voog be a bit limiting for a development platform?
- When user accounts are needed.
- For larger webstores which need multiple VAT support and/or sell digital products.
- When external integrations or plugins need to be added to the back-end. As every site in Voog uses the same back-end, there is no option to externally modify it.
- When an external data source requiring authentication with a private API key needs to be connected. In this case, an external application must be used as a middleman.
Additional reading
- Join the Voog developers Slack channel
- Join the Voog affiliate program and earn credit
- Voog documentation for developers
- Overview of Voog API
- Liquid markup for adding dynamic content
- Command line tool Voog Kit for pushing and pulling changes
- Article about Messente using Webpack for optimizing their Voog site’s speed
- Reviews about Voog
Examples of bespoke websites built on Voog, which connect different data sources
Try it out
Should you have any further questions about Voog, write to us or join the Voog developers channel in Slack.
