A couple of weeks ago we redid the design of our own ScreenSteps Live site. As part of the redesign we wanted to tie our ScreenSteps Live site into our Zendesk help desk. We use Zendesk to manage our support tickets and recently moved our forums over to Zendesk as well. The goal of the redesign was to bring our help tickets, forums and software documentation all together into one consistent interface for our users.

We are very happy with how things have turned out. We know a lot of our customers would like to do something similar so we have prepared several resources that will help you more tightly integrate Zendesk and ScreenSteps Live. As of today you can do the following:

1. Add a Zendesk custom template to your ScreenSteps Live site.
2. Add a “Documentation” tab to your Zendesk site that will point to your ScreenSteps Live site.
3. Add a “Documentation” search widget to the front page of your Zendesk site.

We have also prepared a new video that showcases all of the ways you can integrate ScreenSteps Live with Zendesk:

We have a number of customers that have been using ScreenSteps to document how their companies use Salesforce. Salesforce is highly customizable but with those customizations comes the need for documentation. With ScreenSteps you visually document your company’s Salesforce workflow and provide custom help tailored to your needs.

To show you how to integrate our ScreenSteps Live hosted documentation service with Salesforce, we have created a new integration manual. Currently the manual has one lesson showing how to add a new tab to Salesforce that displays your ScreenSteps Live documentation.

Here is a short screencast demonstrating how to set up a custom tab that displays ScreenSteps Live content.

As you may or may not know, we use Zendesk for our help ticketing system. Until recently we have been using PunBB for our forum software. This last week we finally switched our forums over to Zendesk. Why? It is one less service we need to update and manage and Zendesk has some pretty cool stuff coming out for their forums.

Since we were going to be driving more of our users to our Zendesk site we wanted to customize the presentation a little more. This is what we did:

• Customized some basic CSS – mainly just changed the colors for some elements.
• Added our own navigation tab that pointed to our ScreenSteps Live site (details here).
• Added our Provide Support customer chat link to the Zendesk template using some custom javascript.

Everything was looking pretty good. But when users clicked on the Documentation tab they were taken to our ScreenSteps Live site that didn’t look at all like our Zendesk site. That wasn’t very good. So we added a custom template to our ScreenSteps Live site to make it look like our Zendesk site. You can see the results here:

• Our Zendesk site
• Our ScreenSteps Live site

There is a slight difference. The Zendesk site has a liquid layout while the ScreenSteps Live site has a fixed width. I probably could have done the liquid thing on ScreenSteps Live but I wanted to change as little of the Zendesk CSS as possible just to keep things simple.

So far we are really happy with the solution. We are able to bring together the best of ScreenSteps Live and Zendesk and still present a common user interface to our customers.

We have been using Zendesk to manage our help tickets for quite some time now. This last week we switched over to Zendesk for our customer support forums as well. As we were going to be pointing more of our users to our Zendesk site we wanted to customize the look a bit. The main thing we wanted to do was have easy navigation between our forums and our documentation on ScreenSteps Live.

Using jQuery this is pretty simple. You can use the technique below to add any tab you like to your Zendesk support page. The full details of how we did this can be seen in our ScreenSteps Live API manual. In this post I will just go over the javascript we used.

Insert a new Tab

First we want to use jQuery to insert a new tab into the main navigation. The main navigation on Zendesk is just a ul with an id of green. We are going to insert our new navigation after the FORUMS tab. That has a class of .tab_forums. So here is the code:

  jQuery("div#top-menu ul#green li.tab_forums").after('<li class="main tab_documentation"><a class="tab" href="http://help.screensteps.com">Documentation</a></li>');

As you can see we are just creating our own li element with an anchor tag in it.

Some Clean Up

We could stop there but Zendesk adds little dividers between the non-active tabs and the dividers don’t appear around the active tab. This creates a problem since we have inserted a new tab that Zendesk didn’t know about when it loaded the page. To make their tabs look right Zendesk adds a first class to the li element that appears right after the active tab. See the diagram below.

Now look at what happens when we insert our new li element:

Notice the extra bar next to the navigation.

We want to fix this so let’s add a little more jQuery.

  if (jQuery("div#top-menu ul#green li.tab_forums.active").length) {
    jQuery("div#top-menu ul#green li.first").removeClass("first");
    jQuery("div#top-menu ul#green li.tab_documentation").addClass("first")
  }

This will check to see if the .tab_forums tab is active. If it is we remove the .first class from li element that has it and add the .first class to the tab we just inserted.

And now the page looks correct.

The next step for our integration is to customize our ScreenSteps Live template to blend in better with our help desk. We will post about that later.

We have seen some changes recently in how our customers are using ScreenSteps that are very interesting. ScreenSteps for a long time has been used mainly to create software documentation for single applications. But now we are seeing more and more customers using ScreenSteps to support the integrated use of many applications.

This is an interesting development in several ways and shows what challenges small businesses, non-profits and educational institutions are facing.

Applications in general are becoming more modular in nature. Looking at our own business, we use separate applications for:

• Help desk
• Online knowledge base
• Email marketing
• CRM
• Project management

We much prefer this approach because instead of getting one app that does a lot of things “kind of well”, we get several apps that do one thing really well.

But this also presents a challenge – integrating all of these apps into a consistent workflow that works for our business. The vendors of the various applications can’t possibly provide documentation on how we will use these products together. If that documentation is going to exist we need to create it because it only applies to us.

For a long time we have used ScreenSteps and ScreenSteps Live to help ourselves make better use of the technology we purchase. We create documentation that is primarily for internal use. This benefits our business in a variety of ways:

• We spend less time re-learning workflows
• When someone is not around it makes it easier for other workers to take over their responsibilities.
• It makes it easier to add new people to our team on a temporary or permanent basis.
• It helps us integrate the various products/services we use more efficiently.

When we first launched ScreenSteps we were telling a lot of businesses that they should be following this same method of documenting things internally, but our suggestions seemed to largely fall on deaf ears. The companies we were talking to were interested in creating documentation for their customers, but not their employees.

But over the last few months we have really seen a change. We are talking to many more customers that are primarily using ScreenSteps to support their internal employees. We recently did a case study on Jenna Baze at Aero-Metric, Inc. using ScreenSteps and Google Sites to support her colleagues on Salesforce. Her primary job is to keep the sales team running efficiently. Good documentation helps their business run better.

We also did a case study on Judi Sohn at C3. Judi is using ScreenSteps and Google Sites to help her non-profit use Salesforce, WordPress, and other technologies..

We have also seen an uptick in interest from school districts and universities (one of the early adopters of ScreenSteps Live was Saddleback Valley Unified School District who grasped onto the concept of building visual knowledge bases right away and has had fantastic results.)

All these organizations have faced the challenge of getting the maximum benefit out of the technology products they are using. They want to turn technology features into business results. Documentation is helping them do that. ScreenSteps is helping them create that documentation more quickly and more clearly.

We are seeing this shift on ScreenSteps Live as well. Previously we would only hear from users who wanted to use ScreenSteps Live to support external customers. The thought was that internal employees could somehow get by without the same level of support that customers needed. But in recent weeks I would say at least half or more of our ScreenSteps Live customers are starting to use ScreenSteps Live for internal help files as well as external facing material. We are also seeing an increase in users who are only using ScreenSteps Live for internal facing help files.

It is an exciting time to be a small business. There are so many tools available that help you accomplish quite a bit with limited resources. The trick is tying it all together. Creating clear and simple documentation that is specific to your business or organization, regardless of the documentation tool you use, can really help you get the most out of your technology investment.

We are happy to announce a new integration option for our ScreenSteps Live customers. We have been working with the good people over at TeamSupport.com to provide a solution where TeamSupport users could better integrate their ScreenSteps Live content into their TeamSupport Knowledge Bases.

To accomplish this we have added a new feature to ScreenSteps Live that lets you embed ScreenSteps Live lessons as iframes. But this isn’t your standard iframe. By adding the right extension to your ScreenSteps Live url you can get an iframe that only displays the lesson content, not all of the other ScreenSteps Live navigation. The result looks much better when embedded into TeamSupport Knowledge Bases. Watch the video below for an overview of how it all works:

If you want to see how to set up the ScreenSteps Live Support Client to copy iframe tags as shown in the video you can find instructions here:

How to create an iframe Clipboard Template

We are happy to announce a few minor updates to custom templates on ScreenSteps Live.

Page Titles for Custom Templates

Until now, custom templates could only have a single page title setting. This was a real pain if you were using some sort of tracking code in your custom template because your reports would show every page as having the same title. Also, serving up every page with the exact same title didn’t do much for SEO optimization.

But now if you add the following code to your custom template you will get improved page titles.

<title>{{ page_title }}</title>

The page title is constructed as follows:

space_title | manual_or_bucket_title | lesson_title

Google Translator

Many people have asked about the Google Translator widget we have on the sidebar of our lessons. It is a quick way of letting users translate your lessons into whatever language they need. The translations may not be perfect but in most cases they are close enough. You can now add this to your custom template by inserting the following code:

{% assign show_translator = true %}

Important: The Google Translator can only be added to public spaces.

There are also a few other options which we have documented in the following two lessons:

• Preparing a Custom Template
• Experimental Custom Template Additions

We hope that you find the new features useful.

We have been working on quite a few changes over the last couple of weeks with ScreenSteps Live and just wanted to make you aware of some of the new features that are available on your account if you are a ScreenSteps Live user.

Updated API Documentation and API Change

Over the last few weeks we have been doing a lot of work on the ScreenSteps Live API. We are little embarrassed to say that our documentation of the API has been a little lacking. But no more. We have expanded the API section of our documentation with example xml from all of the different documented API calls. We have also consolidated all of the API resources into a single manual to make it easier to get information.

One important change – While working on the documentation we noticed a problem in the xml for the tag information of a lesson in a manual. Currently the xml node for tag information for a lesson in a manual looks like this:

<lesson>
  <tags>
    <name>The Tag Name</name>
  </tags>
</lesson>

It should be:

<lesson>
  <tags>
    <tag>
      <name>The Tag Name</name>
    </tag> 
  </tags>
</lesson>

There was a missing tag node. This will only affect you if:

• You are using the API to display the contents of a lesson AND
• The lesson is in a manual AND
• You are displaying the tags for that lesson via the API

View the New API Documentation

RSS Feeds For Spaces, Buckets and Manuals

We have added RSS feeds for your spaces, buckets and manuals. With RSS feeds your users can keep up to date on new lessons that you are adding to your space, manual or bucket. If you are using the standard template, then the RSS feeds are already active in your account.

If you are using a custom template then you will need to add the new rss tag inside of the <head> tag of your custom template. The new tag is:

{{ rss }}

New Search Widget To Add To Your Site

We have also released a new ScreenSteps Live Search Widget that uses standard HTML and Javascript. This means you can insert it anywhere on your website or in other web applications that let you add custom HTML and Javascript. Here are a couple of links that can you started with the widget.

Adding a ScreenSteps Live Search Widget to Your Site

Or you can look at one of the implementations we have created using this widget in FogBugz:

Adding a ScreenSteps Live Widget to FogBugz

Linking Between Lessons in Manuals

ScreenSteps 2.8 is just about ready for release. One of the key enhancements is the new ability to link between lessons in a manual. You can see an example here. This really adds a lot of flexibility when publishing your manuals to ScreenSteps Live.

If you would like to get the beta you can download it now:

Download the ScreenSteps 2.8 Beta

We are happy to announce the availability of a ScreenSteps Live widget for FogBugz help desks. This widget will allow FogBugz users to quickly search their ScreenSteps Live knowledge base right from within their FogBugz help desk. The video below give a quick overview.

You can find instructions on how to install the widget here:

Installing the ScreenSteps Live FogBugz Search Widget

Today we have released a new Ruby wrapper for interacting with the ScreenSteps Live API using ActiveResource. The video below shows some examples of using the wrapper in the console. The API will let you:

• Retrieve spaces, manuals, buckets and lessons
• Search spaces, manuals and buckets
• Get lessons for a given tag in a space, manual or bucket
• Create tasks in your ScreenSteps Live account

We hope that this will make it easier for Rubyists to integrate ScreenSteps Live with their Ruby applications.

You can download the latest version of the library at GitHub: http://github.com/bluemango/ScreenSteps-Live-API-Ruby-Wrapper

Several of the ideas for setting up the library were taken from the Batchbook ruby library.