Basics

The embedded widget variant is the easiest integration. We provide you with a code snippet you can add to your search page.

The basics

Step 1: add the div with a unique id

<div id="searchinenet"></div>

Step 2: Add the snippet to your page.

<script type="text/javascript">
window._sn = window._sn || [];
window._sn.config = {
    engineid: '-- insert your id --'
};

window._sn.widgets = [];
window._sn.widgets.push({
    container: '#searchinenet',
    engineid: '-- insert your id --'
});
</script>
<script type="text/javascript">
	(function () {
		var snloadf = function() {
			if (typeof window.__snld != "undefined") { return; }
			window.__snld = 1;
			var s = document.getElementsByTagName("script")[0];
			var b = document.createElement("script");
			b.type = "text/javascript";
			b.async = true;
			b.id = "snscript";
			b.src = "//app.searchine.net/scripts/dist/searchine.widget.min.js";
			s.parentNode.insertBefore(b, s);
		};
		setTimeout(snloadf, 0);
	})();
</script>

The Engine ID is located on the Search Configuration page in our portal.
Press the icon for "Get embed script" that will give you a preview of the Iframe widget. Above the preview you can find the Engine ID.
The best practice is to add the snippet just before the </body> tag.

Part 3: Enjoy your search

Example:

More options

Styling

Out of the box the colours and styles from the website will be used.
This is done by the script that will interpret and calculate the colours based on the parent HTML element that was added in step 1. 
You can also provide a set of colours to style the widget and override this behaviour.

More about styling options

Custom options

You can translate labels like the text in the search button and enable / disable some other options.

Read more about this here.

Methods / events

The embedded widget comes with some events. 

Styling