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.

The code has been updated to reflect options added by EBSCO as part of their new interface.

The iFrames approach previously available has been withdrawn as this is no longer advised for Cyber security reasons. If you currently use this then we recommend changing to the new code.

Embedded search boxes based on the pre July 2026 code should continue to work.

The default version provided below is deliberately plain to fit into your site. It comes with an AI-assisted search toggle

There are some additional options available for which the Service desk team are happy to create custom code for you.

It is possible to have quick limiter buttons below the search box. Of these we think the one likeliest to be of interest is "Catalog only". Other options are "Institutional Repository only", Full text, Peer reviewed. As the Full text limiter does not include all the content added by LibKey we would not recommend this.

Generic Code to amend to point at your own Hub

The code below references the 'National' instance of the Knowledge and Library Hub. This is identified by the "opaque ID" value of "wog43o". To amend this code to point at your own instance, you need to swap out that opaque ID for your own.

You can find the opaque ID for your Knowledge and Library Hub instance in the article entitled What's my local instance? your opaque ID is the six characters at the end of your basic Hub URL - ie the one that takes you to your Hub without forcing you to log in.

There are three inclusions of the Opaque ID in the initial block of code but it is not mentioned in the Style section.

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.

Results open in a new window.

</span>

<div class="ebsco-search-box__header">Knowledge and Library Hub</div>

<input

class="ebsco-search-box__search__input"

type="search"

placeholder="Searching health and care evidence"

aria-label="Searching health and care evidence"

aria-describedby="eds-wog43o-search-new-window-description"

name="q"

<button

class="ebsco-search-box__search__button"

type="submit"

title="Search"

aria-label="Search. Results open in a new window."

<path

fill="currentColor"

d="M508.5 468.9L387.1 347.5c-2.3-2.3-5.3-3.5-8.5-3.5h-13.2c31.5-36.5 50.6-84 50.6-136C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c52 0 99.5-19.1 136-50.6v13.2c0 3.2 1.3 6.2 3.5 8.5l121.4 121.4c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17zM208 368c-88.4 0-160-71.6-160-160S119.6 48 208 48s160 71.6 160 160-71.6 160-160 160z"

></path>

</svg>

</button>

</div>

<svg

width="18"

height="14"

viewBox="0 0 18 14"

fill="none"

xmlns="http://www.w3.org/2000/svg"

aria-hidden="true"

focusable="false"

class="ebsco-search-box__extras__nls__display__icon"

<path

d="M6.08471 10.6237L2.29164 6.83059L1 8.11313L6.08471 13.1978L17 2.28255L15.7175 1L6.08471 10.6237Z"

fill="currentcolor"

stroke="currentcolor"

></path>

</svg>

</span>

<span class="ebsco-search-box__extras__nls__display__text">AI-assisted search</span>

</label>

</div>

</form>

</div>

<style>

.ebsco-search-box {

padding: 2rem;

}

.ebsco-search-box * {

transition: all 0.3s ease-in-out 0ms;

}

.ebsco-search-box__search:has(:focus-within) {

border-color: #3e75cf;

box-shadow:

0 0 0 1px #3e75cf,

0 0 0 4px #d8e3f5;

}

.ebsco-search-box__search:has(:focus-within).novelist {

border-color: #634790;

box-shadow:

0 0 0 1px #634790,

0 0 0 4px #e6e0f0;

}

.ebsco-search-box__search {

color: #3d3f42;

border: 1px solid #8d9095;

border-radius: 4px;

cursor: pointer;

display: flex;

}

.ebsco-search-box__search__input {

border: none;

outline: none;

flex-grow: 1;

padding-block: 0.75rem;

padding-inline-start: 1rem;

border-radius: 4px;

font-size: 1rem;

color: #3d3f42;

font-family: "Noto Sans", Arial, sans-serif;

}

.ebsco-search-box__search__button {

border: none;

background-color: transparent;

outline-offset: -8px;

padding-inline: 1rem;

cursor: pointer;

display: flex;

align-items: center;

color: #2d62b7;

}

.ebsco-search-box__search__button.novelist {

color: #634790;

}

.ebsco-search-box__search__button:hover {

color: #255096;

}

.ebsco-search-box__search__button > svg {

width: 1.25rem;

height: 1.25rem;

}

.ebsco-search-box__extras {

margin-top: 1rem;

display: flex;

flex-wrap: wrap;

gap: 1rem;

}

.ebsco-search-box__extras--additional {

justify-content: space-between;

}

.ebsco-search-box__extras__advanced {

flex-grow: 1;

justify-content: flex-end;

}

.ebsco-search-box__extras__advanced,

.ebsco-search-box__extras__nls {

display: flex;

align-items: center;

gap: 1rem;

}

.ebsco-search-box__extras__advanced a {

color: #55585d;

border-radius: 4px;

cursor: pointer;

display: flex;

align-items: center;

font-weight: 600;

font-size: 0.875rem;

text-decoration: none;

}

.ebsco-search-box__extras__advanced a:hover {

text-decoration: underline;

color: #3d3f42;

}

.ebsco-search-box__extras__limiter:hover > .label {

color: #3d3f42;

border-color: #8d9095;

background-color: #f5f5f5;

}

.ebsco-search-box__extras__limiter > .label {

padding-inline: 0.75rem;

padding-block: 0.5rem;

color: #55585d;

border-radius: 4px;

cursor: pointer;

border: 1px solid #8d9095;

display: block;

font-weight: 600;

font-size: 0.875rem;

background-color: #fff;

}

.ebsco-search-box__extras__limiter {

position: relative;

}

.ebsco-search-box__extras__limiter > input {

position: absolute;

inset: 0;

height: 100%;

width: 100%;

z-index: 1;

opacity: 0;

border: none;

margin: 0 !important;

}

.ebsco-search-box__extras__limiter > input:focus {

outline: none;

}

.ebsco-search-box__extras__limiter > input:focus-visible + .label {

border-color: #3e75cf;

box-shadow:

0 0 0 1px #3e75cf,

0 0 0 4px #d8e3f5;

}

.ebsco-search-box__extras__limiter.novelist > input:focus-visible + .label {

border-color: #634790;

box-shadow:

0 0 0 1px #634790,

0 0 0 4px #e6e0f0;

}

.ebsco-search-box__extras__limiter > input:checked + .label {

border-color: #152d55;

background-color: #e9effa;

color: #152d55;

box-shadow: 0 0 0 1px #152d55;

}

.ebsco-search-box__extras__limiter.novelist > input:checked + .label {

border-color: #634790;

background-color: #e6e0f0;

color: #634790;

}

.ebsco-search-box__extras__limiter:hover > input:checked + .label {

color: #3d3f42;

background-color: #f5f5f5;

border-color: #8d9095;

}

.ebsco-search-box__extras__limiter.novelist:hover > input:checked + .label {

color: #473367;

background-color: #cdc0e0;

border-color: #473367;

}

.ebsco-search-box__logo {

display: block;

padding: 1rem;

}

.ebsco-search-box__logo__image {

width: 100%;

height: 100px;

display: block;

}

.ebsco-search-box__header {

margin-block-end: 0.67rem;

font-family: "Noto Serif", Georgia, serif;

font-weight: 700;

color: #161718;

font-size: 1rem;

}

.ebsco-search-box__radio {

display: flex;

flex-direction: row;

border: none;

padding: 0;

margin: 0;

gap: 0.5rem;

flex-wrap: wrap;

}

.ebsco-search-box__radio > label {

position: relative;

}

.ebsco-search-box__radio > label > [type="radio"] {

display: contents;

height: 0;

width: 0;

opacity: 0;

}

.ebsco-search-box__radio > label > [type="radio"] + span {

color: #55585d;

font-weight: 600;

font-size: 0.875rem;

border-radius: 4px;

border: 1px solid #8d9095;

box-sizing: border-box;

display: block;

cursor: pointer;

padding-inline: 0.75rem;

padding-block: 0.5rem;

}

.ebsco-search-box__radio > label > [type="radio"] + span:hover {

color: #3d3f42;

background-color: #f5f5f5;

}

.ebsco-search-box__radio > label > [type="radio"]:checked + span {

border: 1px solid #3e75cf;

background-color: #e9effa;

color: #2d62b7;

}

.ebsco-search-box__radio > label > [type="radio"]:checked + span:hover {

color: #1d3f75;

background-color: #d8e3f5;

border-color: #8d9095;

}

.ebsco-search-box__radio > label > [type="radio"]:focus + span {

border-color: #3e75cf;

box-shadow:

0 0 0 1px #3e75cf,

0 0 0 4px #d8e3f5;

}

.ebsco-search-box__search > select {

border: none;

border-radius: 4px;

border-inline-end: 1px solid #8d9095;

border-end-end-radius: 0;

border-start-end-radius: 0;

padding-inline-start: 0.5rem;

padding-inline-end: 0.2rem;

font-size: 1rem;

}

.ebsco-search-box__extras__nls > label {

display: flex;

flex-wrap: wrap;

align-items: center;

position: relative;

cursor: pointer;

gap: 1ch;

}

.ebsco-search-box__extras__nls > label > input {

position: absolute;

opacity: 0;

width: 100%;

height: 100%;

}

.ebsco-search-box__extras__nls__display {

display: inline-flex;

align-items: center;

justify-content: flex-start;

box-sizing: content-box;

width: calc(1.1em * 2 + 0.2em * 2);

height: calc(1.01em + 0.2em * 2);

position: relative;

border-radius: 100vw;

border: 2px solid #8d9095;

transition: 250ms;

}

.ebsco-search-box__extras__nls__display__before {

z-index: 2;

position: absolute;

top: 50%;

left: 0.2em;

box-sizing: border-box;

width: 1.1em;

height: 1.1em;

border-radius: 50%;

background-color: #8d9095;

transform: translate(0, -50%);

will-change: transform;

transition: inherit;

}

.ebsco-search-box__extras__nls

> label

> input:focus {

outline: none;

}

.ebsco-search-box__extras__nls

> label

> input:focus-visible

+ .ebsco-search-box__extras__nls__display {

border-color: #3e75cf;

box-shadow: 0 0 0 3px #d8e3f5;

}

.ebsco-search-box__extras__nls

> label

> input:focus:not(:focus-visible)

+ .ebsco-search-box__extras__nls__display {

box-shadow: none;

}

.ebsco-search-box__extras__nls

> label

> input:checked

+ .ebsco-search-box__extras__nls__display {

background-color: #00758d;

border: 2px solid #00758d;

}

.ebsco-search-box__extras__nls:hover

> label

> input:checked

+ .ebsco-search-box__extras__nls__display {

background-color: #006479;

}

.ebsco-search-box__extras__nls:hover

> label

> input:not(:checked)

+ .ebsco-search-box__extras__nls__display {

background-color: #f5f5f5;

}

.ebsco-search-box__extras__nls:hover

.ebsco-search-box__extras__nls__display__before {

background-color: #6e7277;

}

.ebsco-search-box__extras__nls:hover .ebsco-search-box__extras__nls__display {

border-color: #6e7277;

}

.ebsco-search-box__extras__nls

> label

> input:checked

+ .ebsco-search-box__extras__nls__display

> .ebsco-search-box__extras__nls__display__before {

transform: translate(100%, -50%);

background-color: #fff;

}

[dir="rtl"] .ebsco-search-box__extras__nls__display__before {

left: auto;

right: 0.2em;

}

[dir="rtl"]

.ebsco-search-box__extras__nls

> label

> input:checked

+ .ebsco-search-box__extras__nls__display

> .ebsco-search-box__extras__nls__display__before {

transform: translate(-100%, -50%);

}

.ebsco-search-box__extras__nls__display__icon {

display: inline-block;

width: 1em;

height: 1em;

fill: currentcolor;

vertical-align: middle;

overflow: hidden;

color: #fff;

margin-inline-start: 0.35em;

font-size: 75%;

}

.ebsco-search-box__extras__nls__display__text {

font-size: 0.875rem;

color: #55585d;

user-select: none;

font-weight: 600;

}

.ebsco-search-box__sr-only {

position: absolute;

width: 1px;

height: 1px;

padding: 0;

margin: -1px;

overflow: hidden;

clip: rect(0, 0, 0, 0);

white-space: nowrap;

border: 0;

}

.ebsco-search-box__new-window-icon {

display: inline-block;

width: 1em;

height: 1em;

margin-inline-start: 0.35em;

vertical-align: middle;

flex-shrink: 0;

}

</style>