There are several options to make the interactive sheet music viewer fit each vendor's unique site. They may choose whether to load the viewer in a pop-up window or embed it in a page on their site. When loading print-ready music, they may also choose whether to hide the print-ready list or load music contained on a specific order.
4.3.1. Load the Viewer in a Pop-Up Window
Vendors may choose to load the interactive sheet music viewer in a pop-up window. To load the viewer in a pop-up window, vendors can use Javascript to open the window. Below is an example of the HTML used to create a link to load a preview in a pop-up window:
<a href="https://app.legatomedia.com/music/view/<hashed vendor username>/<music_id>" title="Preview" onclick="return openView(this.href);">Preview</a>
This example calls the Javascript function openViewer() when the link is clicked. An example of this function is below.
function openViewer(url) { newWindow = window.open(url, 'name', 'width=840,height=825,menubar=no,status=no,toolbar=no,directories=no,location=no,resizable=yes'); if (window.focus) {newWindow.focus();} return false; }Legato recommends using the following options: give the window a width of 840 pixels and a height of 825 pixels, do not display the navigation bar, the menubar, the toolbar, directory buttons, and allow the window to be resized.
4.3.2. DEPRICATED : Embed the Viewer
** NEW VERSIONS OF CHROME HAVE PROBLEMS WITH IFRAMES RENDERING AND PRINTING SVG FILES. YOU CAN STILL USE THIS PROCESS, BUT IT COULD CAUSE PROBLEMS WITH THE PRINTING OF PRODUCTS. *****
Vendors can also choose to embed the interactive sheet music viewer in a page on their site using an IFrame. Below is an example of the HTML used to load a preview in an IFrame. The width and height of the IFrame can be resized to accomodate size constraints, but an approximate width of 840 pixels and height of 825 pixels fits the viewer best.
<iframe src="https://app.legatomedia.com/music/view/<hashed vend username>/<music_id>" width="840" height="825" scrolling="no"></iframe>