Customer Self-Help

The FAQ section is where you can create your help documentation. Its hierarchy is three levels deep.

-Faqs

----Topics

-------Questions

8990

1. Faq/Topic/Question List: This is the list of items at your current location in the FAQ hierarchy.

2. Search FAQs: List Faqs, Topics, and Questions matching a keyword

3. Add New Faq/Topic/Question: Use this button to add a new Faq, Topic, or Question. The button changes depending on your location in the FAQ hierarchy.

4. Re-order item: Click this icon and drag the item up or down in the list to change its display position in the FAQ page and Widget.

5. Edit item: Click this icon to open the editor window for the Faq, Topic, or Question.

6. Delete item: Click this item to remove the Faq, Topic, or Question.

 

FAQs are created in FAQ section of Snappy. For instructions to creating a knowledge base in the FAQ section, check out our blog post: How to Create a Great Knowledge Base. The instructions are located in the second part of the article.

 

We do allow you to use a custom CNAME that points to your Snappy FAQs. See the information below on how to set this up:

A CNAME, or Canonical Name, record is an entry within the Domain Name System (DNS) that specifies where a user can find your web pages, or any other URL. You'll use this to associate your subdomain with Snappy.

Step 1.

To set this up you need to visit your domain registrar and add a new CNAME that points to {account}.besnappy.com. For example if your domain name is robots.com and your Snappy account name is "robots" then help.robots.com would have a CNAME pointed to robots.besnappy.com.

Here are a few links for instructions on popular registrars:

Every registrar is different so please check with them if you need assistance with this step.

Step 2.

After you have setup your CNAME login to Snappy. From here select "Faq" and enter your full domain in the custom domain field. After saving your custom domain should now be working.

Please note that DNS changes can take up to 72 hours to change. So if it isn't loading yet please have patience and check back at a later time.

 

When creating/editing an FAQ there's an option for a custom CSS file. Simply post your customized css file online and put the full URL to it in that settings box.

You can find the base stylesheet we use here: /css/public.css

We encourage you to view source on this page to see the organization of the HTML. We've kept it very simple to make customization easy.

Also note, we'd love to help share styles you create so if you make a great looking alternative css file post it in Github (or elsewhere) and let us know via the Support link above and we'll link to it so others can use it also.

 

Inside the faq settings Snappy includes a custom navigation area which will allow you to enter any links. This is broken down by the type of link so you can choose twitter, dribbble, email, etc. This choice determines what icon we display beside the link.

 

If your language is missing, please contact us and tell us which language you would like translations for.

 

Snappy's faq system is very flexible in allowing you to organize it in a way that makes the most sense for you. Here are a few common ways that we've seen them used:

General Areas

This is how these faqs are setup. Each parent is a general topic:

1297

Product Platforms

The use case for product platforms is when you release the same product on several different platforms.

1299

By Department

These are typically found in an IT setting and have the main faqs as each department that drill down into specific questions:

1296

 

The Snappy Widget allows you to add a help widget into your site or your web based application.

You can get your custom base embed code inside your Snappy account under your Company menu->Widget.

Copy the embed code and paste it just above your closing </body> tag.

The embed code supports the following data attributes outside what is shown in the code sample:

<script
    src=""
    data-domain=""
    data-position="bottom right"
    data-lang="en"
    data-contact="1"
    data-name="John Doe"
    data-email="test@example.com"
    data-title="Help"
    data-background=""
    data-debug="1"
    data-faq="3"
</script>

data-position

The position of the button on your site. Possible values are:

  • top left
  • top right
  • bottom left
  • bottom right

data-lang

The language you would like the widget UI to be in. You can omit this to use the language defined in the widget settings. Some possible values for this are:

  • ca
  • de
  • el
  • en
  • es
  • fr_FR
  • it_IT
  • nl_NL
  • pl
  • pt
  • ru

We have additional languages supported. Contact us if you do not see the one you need listed.

data-contact

A one or zero flag that allows the contact form to be turned on (1) or off (0).

data-name

This is a persons name which is used to pre-fill the name on the contact form.

data-email

This is a persons email which is used to pre-fill the name on the contact form.

data-title

This is the title or text of the widget button. It will default to "Help & Support" if not supplied.

data-background

This sets the background color of the button. It will accept any valid css color selector. You can also customize the button via CSS. By default it uses the #snappy-faq selector and you can over ride by adding a more specific selector such as body #snappy-faq.

data-custom-*

If you would like to pass any custom attributes that are sent via the contact form. Some examples could be application data or customer data.

data-custom-version="v1.2.3" 
data-custom-plan="Paid Plan"

data-debug

This is a special option that will prefix all questions with their id. The use case for this is to allow you to find the id for advanced integrations described.

data-faq

By inserting the id of the faq you can have the widget open directly to this section. Use the data-debug attribute above to find out the id of the one you want to use.

 

Beyond just adding the widget to your site you can also interact with it programatically.

The following public methods are available to you:

SnappyWidget.open()

This will open the widget. It also accepts an object of params:

  • SnappyWidget.open({id: 1}) - To open directly to question id 1.
  • SnappyWidget.open({contact: true}) - To open directly to the contact form.
  • SnappyWidget.open({faqId: 1}) - To open directly to a faq
  • SnappyWidget.open({topicId: 1}) - To open directly to a topic

SnappyWidget.close()

This will close the widget if it's open.

SnappyWidget.toggle()

This will open or close based on if it's current status. This takes the same parameters as open().

Snappy Ready

After the widget is initialized it will perform a callback against a snappyReady function and you can add any custom events. Here is an example using jQuery:

<script>
    var snappyReady = function(){
        $(".js-help").click(function(e){
            e.preventDefault();
            SnappyWidget.open({id: 1});
        });
        $(".js-contact").click(function(e){
            e.preventDefault();
            SnappyWidget.open({contact: true});
        });
    };
</script>