This document serves as an integration guide for the Logixboard Search Widget. The Search Widget can be installed on any website to provide customers and partners an easy way to search for shipments or brokerage files.
Code Snippets
Below are the two code snippets for the two different installations of the Logixboard Search Widget. Examples of how each of these will look can be found here:
💡 The snippet should be placed at the bottom of the <body/> or anywhere in the <head/>
The widget can be loaded by placing this code somewhere on the page: <div id="lxb-search-widget"></div>
There are two variables that need to be changed in the snippets below before they are installed on your website. Replace the {{URL}} in the snippets with the prefix of your Logixboard URL. The prefix is the word before [logixboard.com](<http://logixboard.com>) in your URL.
'https://{{URL}}.logixboard.com/widget.js'urlPrefix: '{{URL}}'Compact Mode
<div id='lxb-search-widget' style="width: 320px;height: 245px;" ></div> <script> (function (w, d, s, o, f, js, fjs) { w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', 'lxb1', 'https://{{URL}}.logixboard.com/widget.js')); lxb1('init', { urlPrefix: '{{URL}}', variant: 'compact' }); </script>Large (Responsive) Mode
<div id='lxb-search-widget' style="min-width: 320px;min-height: 280px; width: 100%" ></div> <script> (function (w, d, s, o, f, js, fjs) { w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) }; js = d.createElement(s), fjs = d.getElementsByTagName(s)[0]; js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs); }(window, document, 'script', 'lxb1', 'https://{{URL}}.logixboard.com/widget.js')); lxb1('init', { urlPrefix: '{{URL}}', variant: 'large' }); </script>💡 TIP: Remember to remove the brackets {{ }} when replacing the URL prefix.
❓FAQ
Is the widget white-labeled? e.g. Does the search button customize to match my brand colors? Yes! The Search button matches the Primary Brand Color in your dashboard under Settings —> Customization —> Primary Brand Color.