MeLCat Widget Implementation

This solution article is for Michigan Libraries Only.

NOTE: The widget has been sized specifically for placement in portlets, however, it can be used anywhere on your website.

This article describes how to embed MeLCat widget content and its links into your web pages. It requires you to 'embed' code, which really means copy and pasting some content into a certain area of your WYSIWYG Editor. 

There are two different options when choosing which content you want on your web page.

1. Classic Version - This version allows the user to select the Title, Author, and Keyword to help refine their search.
   
2. Encore Version - This, more simplified version, uses the user's typed in query to search all of the fields by default.
   

These two options are attached as text files to this Solution Article, you can click and open on which one you want to access the content you need to use.

Instructions

Use the following steps to add the MeLCat widget content to your web page.

1. Download and open one of the two content files you wish to add to your site. The HTML file will open in a browser. The page may appear large in your browser that is because the code is responsive and will shrink or enlarge depending on available space.  
2. In either Firefox or chrome you can right click on the HTML page and a drop down will appear. Select "View Page Source"
   
   
   
   
   
3.  You will see that pages source code select the code and copy (CRTL-C)
   
   <div class="form-con" style="background-image: -webkit-gradient(linear, left top, left bottom, from(#1286d3), color-stop(99%, #0a5a8f)); background-image: -webkit-linear-gradient(top, #1286d3 0%, #0a5a8f 99%);background-image: -o-linear-gradient(top, #1286d3 0%, #0a5a8f 99%);background-image: linear-gradient(-180deg, #1286d3 0%, #0a5a8f 99%); background-color: #006EB6; width: 100%; font-family: Arial, Helvetica, sans-serif; text-align: center; display: flex; justify-content: center; align-content: center; flex-direction: column; padding: 1em; height:100%">
   <div class="form-con--t<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>itle" style="color: #fff; margin-bottom: .5em; font-size: 1.4em;"><img style="max-width: 40px; position: relative; display:inline;" src="https://libapps.s3.amazonaws.com/customers/6294/images/mel_reverse.png" alt="Michigan eLibrary logo"> | <strong>Search MeLCat</strong></div>
   <form style="margin-bottom: 0;" action="?" onsubmit="return searchEncore()">
   
   
4. Navigate to the page you want to add this content to and click on the Edit Tab in the content toolbar:
   
5. Once you are in Edit mode for that page, look at the WYSIWYG toolbar above the Text content field and find the Source code button.
   
6. Once clicked, you should see the Source code area. If you already have content on this page, you will see the code that is used to display your content for this page otherwise it will be empty:
   
7. On your PC, copy the code you downloaded from this article, then click in the Source code area and paste the code into the field and click Ok.
8. You should see the results of your code pasting in the WYSIWYG editor. You can add content to the page as needed if you wish by using the editor as you are used to. Once you are done with the page, click Save.
   

NOTES: 

• If you have questions about the MeLCat widget, please contact Sonya Norris at the Library of Michigan: Norriss2@michigan.gov.