AddSearch Installation Instructions

4/29/2021

Content Management and Websites
For Developers

Don’t be discouraged by how long this document is - it’s a very thorough step by step for beginners. If you’re a techie, you’ll ignore most of it. 

1. If you haven’t yet, sign up for AddSearch

  • Even in the trial period (which is 7 days), AddSearch will only crawl your website up to 1K pages (this includes content and contact records like news articles and blog posts too), so you'll need to sign up for a paid plan.
  • Please create an account and from the dashboard click the red "Select plan" button.
  • Above the plans, you'll see the option to pay yearly or monthly, choose your preferred method.
  • As for which plan to sign up for, please select Essentials. You'll then need to add the billing information and, at the bottom of the page, there is an option to choose Add-ons. You need to include the Added quota, which adds another 10K documents to your quota.
    • If you’re a nonprofit organization, you can get a discount. Reach out directly to them.
  • Navigate to Domains and Crawling, and click the Add new domain button. Choose the Crawling option and paste your website’s complete url. (more)
  • Navigate to the Keys and Installation section, under Setup
  • Copy the following code and paste it in a plain text app like Notepad:
<script src="https://addsearch.com/js/?key=####"></script>
  • From the Keys and Installation section, copy your public site key and paste it in the script you copied above, replacing the hashtag symbols. You’ll end up with something like this: (more)
<script src="https://addsearch.com/js/?key=shgsfhs3hf85s3b5sf5f4485dsg6x6"></script>
  • You don’t need your Secret API key for this installation.

2. Open the BRT dashboard and navigate to Site > Site Layouts.

  • Find your root layout, it’ll have something like “Root” or “Site” in the name.
    • Examples: “Conference Root”, “2020 Conference: Site”, “conference - root”.
  • Open the layout, scroll to the bottom of the code and find the closing body tag (</body>)
  • Insert a line above it and paste the script you created with the public key provided by AddSearch.
  • Scroll up ad find your existing search element (it will be something similar to 
<form id="cse-search-box" action="/searchresults">
    <div class="input-group">
        <input type="text" value="@(Request.QueryString["q"])" class="form-control" name="q" id="q-search">
        <span class="input-group-btn">
            <button class="btn btn-default" type="button">
                <i class="fa fa-search"></i>
            </button>
        </span>
    </div><!-- /input-group -->
</form>
  • But it may be something as simple as 
<input type="text" value="@(Request.QueryString["q"])" name="q">
  • For easy installation, but less control, replace the entire form tag with the following code and skip to section 3:
<input type="text" class="addsearch" disabled="disabled" />​
  • For custom install with more control, keep reading.
  • Find the Input field (shown above) and locate the “class” attribute. If there isn’t one, you can copy and paste the following before the “>”:
class="addsearch"
  • If there is one, add a space after the existing class and paste the word addsearch after it. The class attribute should look similar to
class="addsearch"
  • or
class="form-control addsearch"
  • You don’t need the "value" and "name" attributes anymore, so you can remove them. 
  • If the "form" element has any attribute other than a class or id, you can remove it too.
  • If your search field has a submission button, you can remove that. The search happens as you type, so there’s no need for a button. 
  • Your basic installation is done!
 

3. Want to customize the result list? There are a few things you can do:

Create aliases for detail pages (more)

The AddSearch script will read your URL to grab the category, so it’ll display things like “newsdetail”, “blogdetail”, “clergydetail”. You can rename those.
  • In the AddSearch dashboard, navigate to Setup > Other Settings and scroll down to Category Aliases. Click the red “Add new alias” button.
  • On the left side, type the pattern you want to replace, just the friendly url, without any slashes or anything. On the right side, type what you want to replace it with. For example, in order to replace “newsdetail”, in the Pattern box you type the word newsdetail, and on the Category box you type something like News Article. Add as many as you want and click save.
  • A good tip is to search your website for pages that have “detail” in the name.
 

Change how it looks slightly (more)

Below the Category Aliases, you’ll find a section called Look and Field. In the Search results box, paste the code below. The provided css does the following: 
  • Ensures that the results inherit your website font
  • Sets the title color to the UMC blue (you can easily change that if you’d like), and improves size and spacing
  • Increases the font size of the text for better readability
  • Hides the AddSearch logo from the bottom of the dropdown
/* Inherit website font */
#addsearch-results {
    font-family: inherit !important;
}

/* Search result title */
#addsearch-results .addsearch-result-item-sub h2 a {
    color: #13618A !important;
    font-size: 16px !important;
    padding: 8px 0px !important;
    font-weight: 600 !important;
} 
  
/* Search result body or summary */      
#addsearch-results .addsearch-result-item-sub p {
    font-size: 15px !important;
    line-height: 135%;
} 

/* Search result category */
#addsearch-results .addsearch-result-item-sub .addsearch_category {
    font-size: 14px !important;
    font-weight: 400 !important;
} 

/* Remove AddSearch logo */
#addsearch-results #addsearch-results-bottom {
    display: none;
}  

Please browse the AddSearch documentation (https://www.addsearch.com/docs) to find what other customizations options they offer - there are many!