Remember Appear.in? We first learned about this Nordic startup last year and we were blown away by their plugin and app-free approach to video chatting. We thought it was a serious contender to the incumbent video conferencing projects, and we still do.

For those who have ever battled with Cisco WebEx and Skype, the Appear.in offering is pretty compelling. To start a video call, all you need is a modern web browser which supports WebRTC. Right now that means Chrome, Opera and Firefox. Inviting people to the call is also easy, as you are provided a direct link to your room that you can easily share over IM and email.

Appear.in is more than just video conferencing though. It shares some of the advanced features of Google Hangouts and Skype, such as screen sharing, making it easy for people to collaborate, teach, and troubleshoot without having to install any additional software or plugins.

In the past year Appear.in has gone from strength to strength. They've released their iPhone app, and their product is gaining a startling amount of traction. Now they're back with a brand new developer API, and support for embeddable videoconferencing sessions. Simply put, it is now possible to integrate Appear.in within your own website and blog. But why should you care?

The Case For Embeddable Video Chatting

Given it's already quite easy to make an Appear.in room and invite people to it, you could be forgiven for wondering why anyone could possibly want to embed the chat in a blog or website. I can think of a few reasons.

  • You're a website designer who wants to make it easy for customers to get in touch, whilst retaining your own branding. (See our tips for pro-designers)
  • You're a freelance computer engineer, and you want to give your users a direct line to reach you, even when you're traveling without having to share your phone number.
  • You have elderly relatives who find Skype intimidating, and you want to make it easy for them to contact you.
  • You're a blogger and you want to engage with your readers outside of comments.

Whatever your motivation, adding an Appear.in room to your site is incredibly easy. Here's how.

Adding to a web page

Adding an Appear.in room to a web page is straightforward. Obviously, there are a few prerequisites. Firstly, you will need to have a basic understanding of HTML. If you've never written a line of HTML in your life, or you just need a mental refresh, you might want to check out this HTML tutorial e-book.

In addition, you will need permissions to edit the site in question, and to upload new pages. Finally, you will need a text editor (not word processor) to edit the HTML files. A solid text editor which works cross platform is Sublime Text 2, which we have previously (and glowingly) reviewed. If you're a Mac user, I would strongly recommend Atom, which is built by the folks who bought you Github.

In your text editor, open the page you want to add the Appear.in room to. Then, in the appropriate place between the body tags, add the following line of code. 

<iframe src="https://appear.in/your-room-name" frameborder="0"></iframe>

appearin-html

This line of code is what's known as an iframe, and allows you to embed a webpage within a webpage. The 'src' attribute of this URL points to the room your visitors will use. You can change its name (the bit after the '/' and before the '"') as you see fit. If it works, you should see something like this.

appearin-web

The height and width attributes can be adjusted to ensure it fits within your site's aesthetic. So, should you want to embed a chat window that is 500 pixels in width and 300 pixels in height, you'd simply have to type something like the following. 

<iframe src="https://appear.in/your-room-name" frameborder="0"></iframe>

Adding to WordPress

You can even use Appear.in within your Wordpress blog. Like before, all you have to do is copy in a single line of code. First, open the post you want to add the chat window to. Then click on the text view button, adding the Appear.in post to the appropriate place within your post.

appearin-wp-code

If it works, you should have something like this.

appearin-blog

Alternatively, if you have any issues, you might want to download the WordPress iframe plugin. You can then add your video conferencing room to your post with the following shortcode. 

[iframe src="https://appear.in/your-room-name" ]

JavaScript API

For advanced users, there's an API and an SDK which gives you a vastly increased level of control over how Appear.in works within your site. In addition to creating videoconferencing rooms, this allows you to check for WebRTC support, and to create rooms with names that are guaranteed to be unique.

You can read the finer details on how to use the JavaScript SDK in their official documentation [Broken URL Removed].

Which Video Chat Tool Do You Use?

Of course, Appear.in isn't the only videoconferencing service on the market. Everyone knows Skype and Google hangouts, and whilst it's not really feasible to embed them into a webpage as you can with Appear.in, it's certainly easy to make yourself reachable to other people.

Whatever you use, I want to hear about it. Drop me a comment below and we'll chat.