> ## Documentation Index
> Fetch the complete documentation index at: https://viewerdocs.planpoint.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Style & Embed

> In this module, you can preview your project, edit hosting options and customize the style of your Planpoint Viewer.

### How to customize the style

<iframe className="w-full aspect-video rounded-xl" src="https://streamable.com/o/5aw094" title="Planpoint KB - Forms" allowFullScreen />

<Note>
  If you want deeper style customization capabilities, check out our [Custom CSS article](https://viewerdocs.planpoint.io/custom-css). You will need a developer for this.
</Note>

### 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.

<Frame>
  ![](https://i.postimg.cc/W3jnmBkp/WebLogos.png)
</Frame>

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.

<Frame>
  ![](https://i.postimg.cc/1Xx1m5nR/Div.png)
</Frame>

### Video Guide on how to embed

<iframe className="w-full aspect-video rounded-xl" src="https://streamable.com/o/lwdy05" title="Planpoint KB - Forms" allowFullScreen />

### Step-by-step guide

<Steps>
  <Step title="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.

    <Frame>
      ![](https://i.postimg.cc/5yFLG18X/style-and-embed-2.jpg)
    </Frame>
  </Step>

  <Step title="Step 2">
    To preview your work in progress, simply choose the desired **language** output, assign the **namespace**, **project name**, plan viewer **theme** and click on **Open a new tab**.

    <Frame>
      ![](https://i.postimg.cc/brgrmwv0/style-adn-embed.jpg)
    </Frame>

    <Info>
      Assign a permanent namespace and project name before embedding the code. If these are modified, the code will cease to function, necessitating the need for re-embedding.
    </Info>
  </Step>

  <Step title="Step 3">
    A new window will open up with the live preview of your current project. Test your plan viewer and make changes accordingly. You will need to reload the preview in order for changes to take effect.

    <Frame>
      ![](https://i.postimg.cc/Df9X089D/preview.jpg)
    </Frame>
  </Step>

  <Step title="Step 4">
    Once you're satisfied with your plan viewer, simply select the desired language **output** and **theme**, and click on **Click to copy**.

    * You can export as many instances of your plan viewer as you wish, in 5 languages (English, French, Spanish, Chinese and German). Each language will have it's own script to copy-paste.
    * You should paste the code wherever you want your plan viewer to appear in your website. The plan viewer will fill the parent element in which it's inserted. The code will work on every major website platform, from Wordpress to Wix and custom HTML.

    <Frame>
      ![](https://i.postimg.cc/G908fmwH/copy-code.jpg)
    </Frame>
  </Step>
</Steps>
