Google Sites integration guide

Fair warning: new Google Sites users are no longer allowed to embed Javascript from other sites in their templates, so Olark cannot work as normal.

Note: this may not work for your Google Site. The instructions for using a click-to-chat image at the bottom of this tutorial may be the only option for using Olark with Google Sites.

There are two ways to integrate with Google sites. The best way is to follow these steps, but if you're happy with something that doesn't look quite as nice but is easier, then scroll on down to the bottom of the page.

1. Create a text file named olark_embed.xml with the following text:

   		<?xml version="1.0" encoding="UTF-8"?><module>
   <moduleprefs title="Olark Gadget" />
   <content type="html">
    [Your Olark code here!]
   </content>
   </module>
   

2. Replace the words [Your Olark code here!] with the code from www.olark.com/install
3. VERY IMPORTANT: Find the <![CDATA[ tag in your embed code, cut it out, and move it to a line by itself just after the <content type="html"> line. Find the ]]> tag, and move it to a line by itself just before the </content> tag. Be very careful that you only cut and paste exactly that text!
   
   Example:

   		<?xml version="1.0" encoding="UTF-8"?><module>
   <moduleprefs title="Olark Gadget" />
   <content type="html">
   <![CDATA[
   [The rest of your Olark code here!]
   ]]>
   </content>
   </module>
   

4. Save the file (make sure to save as type "All Files" and add a .xml extension, unless your text editor supports saving as xml)
5. Upload the .xml file to an online website. To host at Google Sites, create a page or edit an existing page, then expand the Attachments section, and attach the file. You will have to get the URL of the file if you do it this way by right-clicking the "download" link of the attached file, then choosing "copy the address of the URL".
6. At Google Sites, go to the page that you want the widget on, and click Edit Page
7. Choose Insert from the menu bar, then More Gadgets
8. Click "Add Gadget by URL"
9. Enter the URL from step 4
10. Click OK

If you're fine with having a click-to-chat image rather than the usual box-on-the-bottom, then simply put this code into your page:

<div> <a href="http://static.olark.com/js/html/url_handler.html?url=http://www.example.com&siteid=YOUR-SITE-ID"; target="_top"> <img src="http://images-async.olark.com/status/YOUR-SITE-ID/image.png?online=http://static.olark.com/images/image-orangelark-available.png&offline=http://static.olark.com/images/image-orangelark-unavailable.png"; border=0></a></div> 

Please make sure to replace "http://www.example.com" with your own URL, and "YOUR-SITE-ID" with your site ID which you can find on your Olark dashboard