🖼 Embed a Harbour Submission Page

Easily embed a public agreement link into your own website

1) Create a new, public agreement link in Harbour (e.g., https://new.myharbourshare.com/agree/123abc)

2) Within your own website, embed the agreement link using an iframe:

<iframe src="https://new.myharbourshare.com/agree/123ABC" width="100%" height="2000px" scrolling="no" allowtransparency="true">

*Note: make sure the height above matches the maximum height of the agreement link content. You can also optionally disable embed scrolling by adding, scrolling="no" (more scrolling customization info here).

3) Optionally, if you want to additionally custom the displayed agreement link (e.g., hide banner, change background color, change font family), create and test your CSS overrides (helpful extension for test custom styles - Stylebot) and then provide your desired CSS updates to the Harbour team to make active.

Custom CSS Examples

Hide the logo/banner/title/subtitle

#logo, #banner, #title, #subtitle{display:none;} 
#content, body{top:0px;} 

Change the background color:

html{background-color: transparent;}
#content, body{top:0px; background-color: black;} 

Change the font family:

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@700&display=swap');
.label{ font-family: Rajdhani, Roboto, -apple-system, 'Open Sans', sans-serif; }

4) Optionally, you can also catch an agreement completed event in your main site with: 

//In JavaScript, catch the agreement completion event
window.addEventListener("message", (event) => {
  if(event.data =='harbour_submission-completed'){
    alert("Agreement was completed~! - perform any post-submission action here");
  }
}, false);