Pinterest Stumbleupon Whatsapp
Ads by Google

Remember Appear.in? We first learned about this Nordic startup last year and we were blown away Move Over Google Plus Hangouts. Appear.in Is Here & It's Really Good Move Over Google Plus Hangouts. Appear.in Is Here & It's Really Good People have been crying out for a decent video conferencing app for ages. We thought that was Google Plus. We were wrong. Meet Appear.in. Read More 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.

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

Ads by Google

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 5 Steps To Understanding Basic HTML Code 5 Steps To Understanding Basic HTML Code Read More . 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 Learn to Speak "Internet": Your Guide to xHTML Learn to Speak "Internet": Your Guide to xHTML Welcome to the world of XHTML – Extensible Hypertext Markup Language – a markup language that allows anyone to construct web pages with many different functions. It's the primary language of the Internet. Read More .

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 Sublime Text: The Text Editor You'll Fall in Love With (Windows) Sublime Text: The Text Editor You'll Fall in Love With (Windows) Read More , which we have previously (and glowingly) reviewed Try Out Sublime Text 2 For Your Cross-Platform Code Editing Needs Try Out Sublime Text 2 For Your Cross-Platform Code Editing Needs Sublime Text 2 is a cross-platform code editor I only recently heard about, and I have to say I'm really impressed despite the beta label. You can download the full app without paying a penny... Read More . 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.

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.

  1. UaMV
    January 23, 2015 at 6:57 pm

    In addition to adding directly to WP, or using the iframe plugin, one could also make use of the appear.in WP plugin – http://wordpress.org/plugins/appear-in-wp – which allows sharing of the embeddable URL.

    • Matthew Hughes
      January 23, 2015 at 8:03 pm

      Also true! Thanks for your comment!

Leave a Reply

Your email address will not be published. Required fields are marked *