Skip to main content

​
How to customize the style

If you want deeper style customization capabilities, check out our Custom CSS article. You will need a developer for this.

​
How to embed

Planpoint can be embedded into any kind of website, from custom HTML/CSS/JS to platforms like Webflow, SquareSpace, Wix or WordPress. A Planpoint embed code is simply a few lines of HTML and JavaScript.
Paste the code where you want your Planpoint Viewer to appear. The Planpoint Viewer will obey the width of the parent element in which it’s placed in. The height will be decided by the content inside the viewer. For example, if the building image’s proportions are more vertical than horizontal, Planpoint Viewer will occupy more height on your page. You can stylize the parent element however you see fit, for example by adding padding or giving it a fixed width.
A Responsive Inline Channel will horizontally fill the width of its parent element and grow vertically based on the content of the channel.

​
Video Guide on how to embed

​
Step-by-step guide

1

Step 1

To access the Style & Embed module, locate the project you wish to access in your Planpoint dashboard and click on the Style & Embed button.
2

Step 2 - Embed & Hosting

In the Embed & Hosting card, you’ll find:
  • Project path - the part of the URL that identifies this project (what used to be called the “namespace”). Changing it breaks any embed code already pasted on your site.
  • Language - the language your embedded Viewer displays in. To support multiple languages on your site, generate and paste a separate embed code for each one.
  • Custom Domain (optional) - serve your Viewer (and crawlable per-unit pages, for SEO) on your own subdomain instead of planpoint.io.
  • Embed Code - click Click to copy to grab the current HTML/JS snippet for the language selected above.
  • Planpoint URL - opens the live Viewer in a new tab, handy for testing before you paste the code anywhere.
Theme and color changes are no longer baked into the embed code - the Viewer always pulls your latest style live, so you never need to re-copy/re-paste the code after a style change. Only the Project path and Language affect the code itself.
3

Step 3

Test your plan viewer with Planpoint URL and make changes accordingly - reload the tab after each change to see it take effect.
4

Step 4 - Style

Further down, the Style card lets you fine-tune how the Viewer looks and behaves:Click Customize Style to pick a theme, set a custom color scheme (see the color guide), and edit your project’s terminology.