​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.

The Install tab shows the code block which must be pasted into your page(s):

Two code snippets must be copied into your site’s HTML template. A <script> tag is required just before the closing </body> tag – only one per page is necessary regardless of the number of components you are using:

<code><script project="xxxxxx" src="https://cdn.component.io/v1"></script>
</code>

The code for the component is copied into the HTML sources at the position is is required:

<code><component key=yyyyy load=b></component>
</code>

The Edit button leads to the component editing control:

You can change the component’s content and the display name reference used in the Component.io control panel. Users with a paid subscription or a free trial can click the Code tab to edit the component’s HTML, CSS and JavaScript in a code editor.

Once your edits are complete, refresh the page where your component is installed to view the new content updates.

Finally, hit the project shield icon to return to your component dashboard.

Example 2:

Let’s now add and configure a simple contact form for our page. From the Library tab, search for contact form and select Contact form with company:

Hit the Add to your project button on the preview page to view the Install tab:

Copy the component code into your page as before. Remember you won’t need the <script> tag if it’s already been added for other components.

Refresh your page to view your new contact form. Submit a response and it’ll appear in the Component.io Responses screen:

For easier management, components can be organised by page on the Pages tab.

Sign up at Component IO

Component IO (component.io) offers a free starter plan to try the service. Plans with further features and more than 10,000 component requests start from $7.95 per month. You can sign-up with a Google account or your email address. Make sure you use the promo code SITEPOINT on your project settings page to get your first month on the Standard Plan free. What are you waiting for?!

Frequently Asked Questions (FAQs) about Component.io