Table of contents

FAQ / Troubleshooting - Surfer Guidelines

API Reference - Surfer Guidelines

Getting started

Paste this snippet before your JavaScript code.

<script>(()=>{if(void 0!==window.surferGuidelines)return;window.surferGuidelines={init(...i){window.__sg_in=i},setHtml(...i){window.__sg_sh=i},initWithOptions(...i){window.__sh_gi=i}};const i=document.createElement("script");i.async=!0,i.src="<https://app.surferseo.com/static/surfer_guidelines_1_x_x.js>",document.body.appendChild(i)})();</script>

Please make sure that you are logged into https://app.surferseo.com and your browser has third party cookies enabled. This will be useful during the integration but won't be required for any user.

Basic integration

This method should be sufficient for most of use cases.

In order to make it work you will need to create a placeholder into which Surfer Guidelines will be injected.

<!-- your editor source code -->
<div id="surfer-guidelines-placeholder">
  <!-- guidelines will be placed here -->
</div>

And provide a HTMLElement reference to this placeholder.

window.surferGuidelines.init(
  document.getElementById("surfer-guidelines-placeholder"),
  null, {permalink: "surfer-content-editor-demo", anonymous: true}
);

After this call a small iframe like this should appear in your website.

Add some styles

The next step will be to create some CSS styles which will position Guidelines into your desired place. Code provided is just an example, you will most likely want to tweak this part to your needs.

.surfer-guidelines {
  height: 100%;
  border: 0;
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 400px;
}

.surfer-guidelines.surfer-guidelines-wide {
  width: 80vw;
}

Then if you're logged into https://app.surferseo.com you should see something like this.