Embedding Your Menu | Menu Embed API

# What You'll Need

# Access

You'll need access to insert a script onto the desired page of your website. If your website is built using a CMS or Blog Platform, like Wordpress or Joomla, this may be as simple as logging into the admin to edit a page or installing a plugin for inserting scripts.

# Your Embed Key

The embed key for the store's menu you wish to receive. This is provided to you by Hytiva staff when you let us know you would like to use your embed widget.

# Knowledge

If you wish to customize the margin / padding around your menu, or account for items like a sticky header, you'll need basic knowdlege of CSS, HTML, and Javascript. The Hytiva Development Team will happily assist you with this. Please contact us at ✉️ dev@hytiva.com.

# Embed Code

Please enter your embed key, given to you by hytiva:
Embed Key:
Please use the copy button below to copy your embed code and place it where you want your menu to appear on your website.

<div id="hytivaMenu1">
<script type="text/javascript">
(function() {
	if (!window.hytiva_menu_queue)
		window.hytiva_menu_queue = [];

	let config = {
		"id" : "hytivaMenu1",
		"key": "@@YOUR_EMBED_KEY_HERE@@",
		"host": "https://www.hytiva.com"
	};

	window.hytiva_menu_queue.push(config);

	function async_load(){
		let cb = Math.floor((Date.now() || new Date().getTime()) / 3600000);
		let s = document.createElement('script');
		s.type = 'text/javascript';
		s.async = true;
		s.src = (config.host || "https://www.hytiva.com") + '/assets/js/embed-menu.js?' + cb;

		let embedder = document.getElementById(config.id);
		embedder.parentNode.insertBefore(s, embedder);
	}

	if (window.attachEvent)
		window.attachEvent('onload', async_load);
	else
		window.addEventListener('load', async_load, false);
})();
</script>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# Additional Options

# Offset Top

Add the offsetTop property to your embed configuration to offset the top position of your menu by the number of pixels you specify. This is useful if you have a static header or message that would be in front of or behind the top of the menu if not accounted for.

let config = {
	"id" : "hytivaMenu1",
	"key": "@@YOUR_EMBED_KEY_HERE@@",
	"offsetTop" : 82 // Offset the menu from the top by 82 pixels
};

1
2
3
4
5

# Offset Top Element

Add the offsetTopElement property to your embed configuration to offset the top position of your menu by the measuring the size of a specific element. This is useful if you have a "sticky" header that would be in front of or behind the top of the menu if not accounted for. Sometimes these elements change size when the user scrolls. The embed code will try to measure this element and account for these behaviors.

This property takes a valid CSS selector to find the element you wish to use as the offset element.

let config = {
	"id" : "hytivaMenu1",
	"key": "@@YOUR_EMBED_KEY_HERE@@",
	"offsetTopElement" : "header#mainHeader" // Select a "header" tag with the id "mainHeader"
};