​An Introduction to Component IO

This article is part of an SEO series from Component IO. Thank you for supporting the partners who make SitePoint possible.

It doesn't matter what content management system you use — at some point, someone, somewhere will want to make a change which is beyond the technical limit of their control. Typical examples:

• changing your site's logo or header appearance
• updating the content of your standard page footer
• adding, removing or rearranging social media buttons
• re-configuring a contact form's fields or layout
• adding links to a navigation menu which are not part of the page hierarchy.

It's impossible to create a CMS with an easy-to-use interface which provides for every possible option users could ever want. (Well, you could, but it'd effectively be a code editor!) At some point, you'll need to make technical changes to your WordPress template, static site rendering, React components, Angular configuration or whatever system you're using. The process will typically involve:

1. Allocating developer time and resources. That could be a matter of contacting your development agency, discussing the options and agreeing a budget.
2. Adding new code, plug-ins or configurations to the existing templates as required.
3. Pushing the updates to a staging server.
4. Testing the new system thoroughly and ensuring it doesn't cause regression problems elsewhere.
5. Repeating the steps above if any errors or omissions are encountered.
6. Deploying the verified updates to your live server.

Even the smallest changes take time and money. Inevitably, a new request will arrive the minute the first update goes live.

The Component IO Approach

Component IO tackles the problem in a different way. Rather than taking a holistic, site-wide approach, the service provides a range of ready-to-use components which can be embedded into any website or application regardless of the implementation technology. Most developers will use the service to supplement existing CMS-based content. However, it is possible to create a multi-page site with minimal HTML and a series of embedded components which control everything.

Hundreds of components are available including:

• content blocks
• images and galleries
• navigation bars and menus
• social media integration
• overlays and modal dialogs
• carousels and sliders
• sign-up and contact forms
• buttons, tabs and form elements
• videos, maps and other embedded media.

Components are added to a page with a <component> block and any number can be used. A single </script> tag at the end of the page is then required to activate and control every component.

Once a component has been installed, developers and non-technical users can access the Component IO dashboard to make changes. They don't need to understand HTML, CSS and JavaScript or directly edit the page where the component is used. Updates are instantly available on the next refresh.

The benefits of Component IO include:

• there are hundreds of ready-made, attractive and configurable components to choose from
• component code can be installed with a simple cut and paste
• every CMS, framework and system is supported. If you can edit the HTML, you can add a component.
• it's easy for non-technical editors to use. They can make changes in a WYSIWYG editor and check it with a live preview
• developers can make changes to a component's HTML, CSS and JavaScript code in the dashboard if necessary
• all users can share Component IO dashboard links and collaborate on the same items
• Component IO is fast and delivers items quickly with a single API call regardless of the number embedded within the page
• a full help guide and real-time chat assistance is available
• a free trial account can be used to test the service on your system.

Example 1: Create a Content Block

A content block is one of the simplest and most-used components. First, create or switch to your project by clicking the shield icon at the top left.

Switch to the library tab at the top to view a list of several hundred components. Click the Content Block component to view a preview then hit the Add to your project button.

Continue reading %​An Introduction to Component IO%

by Craig Buckler via SitePoint