How do I embed the Knowledge and Library Hub search box in my local library website?
You can add a Knowledge and Library Hub search box to your library website by adapting and inserting the code below into your webpage.
(An alternative approach is to use an iframe. This technique is described in the article Embedding the Knowledge and Library Hub search box in your local library website using iframes.)
This code is based on the EBSCO search box builder code but has been developed specifically for the NHS Knowledge and Library Hub. This is what the search box will look like when embedded in your webpage:
Amending the Code to point at your own instance
The code below references the 'National' instance of the Knowledge and Library Hub. This is identified by the "custid" value of "ns124040". To amend this code to point at your own instance, you need to swap out that customer ID for your own.
You can find the customer ID for your Knowledge and Library Hub instance in the article entitled What's my local instance?, or in the footer of your Knowledge and Library Hub home page. For example:
Search Box Code
Cut and paste this code to the section of your webpage where you want the search box to be displayed. Remember to change the "custid" value to your own customer ID. The line where you need to make the change is highlighted in the code below.
<div id="eds_searchbox_holder">
<img id="eds_searchbox_logo" src="https://gssapps.ebscohost.com/hee/images/KLS-logo-left-aligned-for-web.png" alt="nhs logo, knowledge & library hub" title="NHS Knowledge and Library Hub">
<div id="eds_searchbox_text"><span id="eds_searchbox_search">Searching: </span><span id="eds_searchbox_slogan">Health and Care Evidence</span></div>
<form method="GET" action="https://search.ebscohost.com/login.aspx">
<input type="hidden" name="direct" value="true"/>
<input type="hidden" name="type" value="0"/>
<input type="hidden" name="searchMode" value="And"/>
<input type="hidden" name="site" value="eds-live"/>
<input type="hidden" name="custid" value="ns124040"/>
<input type="hidden" name="groupid" value="main"/>
<input type="hidden" name="profile" value="hee_eds"/>
<input type="hidden" name="authtype" value="guest"/>
<input type="text" id="eds_searchbox_box" name="bquery" value="" placeholder="Enter any words">
<button type="submit" id="eds_searchbox_button">Search</button>
</form>
</div>
<style>
#eds_searchbox_holder{
background-color: #f8f9fa;
border-radius: 15px;
width: 600px;
margin-left: auto;
margin-right: auto;
padding: 50px;
}
#eds_searchbox_holder {
font-family: Helvetica, Arial, sans-serif;
font-size: 13.5px;
}
#eds_searchbox_text {
margin-top: 1em;
margin-bottom: 0.5em;
}
#eds_searchbox_logo {
width: 80%;
max-width: 400px;
min-width: 120px;
}
#eds_searchbox_search {
margin-left: 2px;
}
#eds_searchbox_slogan {
color: #a55180;
font-weight: bold;
}
#eds_searchbox_button {
background-color: rgb(165, 81, 128);
border-bottom-color: rgb(174, 37, 115);
border-radius: 3px;
border: 1px solid rgb(174, 37, 115);
color: rgb(255, 255, 255);
cursor: pointer;
display: inline-block;
font-family: Helvetica, Arial, sans-serif;
font-size: 20.25px;
font-weight: 600;
height: 42px;
margin: 2px 1px 1px 2px;
padding: 5px;
text-align: center;
width: 105.375px;
word-spacing: 0px;
writing-mode: horizontal-tb;
box-shadow: none !important;
}
#eds_searchbox_box {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(163, 163, 163);
box-sizing: border-box;
color: rgb(34, 34, 34);
cursor: auto;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
height: 42px;
line-height: 16px;
margin: 2px 0px 4px 2px;
max-width: 100%;
padding: 6px 28px 6px 15px;
width: 450px;
word-spacing: 0px;
writing-mode: horizontal-tb;
}
.eds_searchbox_button_100{
width: 100%;
}
@media only screen and (max-width: 425px) {
#eds_searchbox_logo {
width: 90%;
}
#eds_searchbox_holder{
width: 90%;
padding: 5%;
}
#eds_searchbox_box {
width: 100%;
}
#eds_searchbox_button {
width: 100%;
}
#eds_searchbox_text {
margin-bottom: 1em;
}
#eds_searchbox_search {
display: none;
}
#eds_searchbox_slogan {
font-weight: normal;
}
}
</style>