How to add Swiftype to your Desk.com Support Portal
Desk.com is a customer service application that can include custom Support Centers. This tutorial will help you install your Swiftype search box in place of desk's default search through use of their Advanced Theme Editor.
What You'll Need
- Knowledge of HTML/CSS.
- Scripting enabled on your account (Desk.com's support team can do this for you).
- Administrator access level or above (required to be able to make changes in the Advanced Theme Editor).
Step 1: Create a Swiftype Account
You can create a Swiftype account for free, and you will use this account to control your search engine once it is installed.
Step 2: Create a Search Engine
To create your search engine, from the main Swiftype dashboard click the Create Search Engine button in the upper right corner.
From here we'll select Web Crawler as our search engine type. Next you'll be able enter the URL of your desk.com support portal into the site validation field. Once the validation process completes, you'll be able to name your engine.
Now, our system will crawl your site and create the search engine in real-time, showing you our progress along the way.
Step 3: Prepare your custom Web Theme within desk.com
While Swiftype is indexing your website, switch over to your desk.com Admin interface. Once here, you're able to create a new theme or edit a current one. Located in the Administrator panel under Channels → Support Center → Web Themes, you'll click on the gear icon at the right of the theme row. This will open an "Edit Web Theme" pop-up. Now click on the "Advanced Themes" link tab.
There are 3 section templates that we'll be working with primarily:
The Header section is where you'll add your custom CSS styles to match your overall theme. The Layout & Page (Index) sections are where we'll replace the default search form with our Swiftype embed snippet.
By locating the
search_form_end tags you'll find the default search snippets. You can either remove these sections all together or comment them out by enclosing with <!-- -->. Commenting this section of code will enable you to more easily revert any changes just in case you need to.
Examples of where these sections exist in the default Web Template can be found below:
Page (Index) Section
Step 4: Copy the Installation Code
After preparing your desk.com template your search engine should be ready for installation. Head back to your Swiftype dashboard and click the Install button.
Next, select your preferred install method and copy the embed script. You can find an overview of installation options here.
Step 5: Add the Embed Snippet to your Web Theme
Now it's time to paste your Swiftype code snippet into the prepared sections of your Web Theme. It's best to do so within the same code blocks as where you commented out the default snippets.
Once that's done, you can update your theme and you should see your Swiftype search bars in action!
You'll probably notice that the default styling of the Swiftype search widget stands out a bit like a sore thumb. But have no fear! You can customize the look and feel of your Swiftype search box with the assistance of our Style Guide.
For even more refined targeting you may want to wrap your snippets in their own
<div> tags. This will allow you to assign custom IDs or Classes to each instance of the search box.
Through Desk.com's Advanced Theme Editor it's also possible to integrate many of Swiftype's key features.
You can also use our content inclusion/exclusion features to curate the sections of article content that are indexed. This will enable you to prevent navagation, footer, and info elements within your help center template from being indexed.