Appearance
Snippets
Enhancing a website with Plinthos content is fast and easy with Snippets.
Plinthos adds a highly impactful third dimension to both standard document-style websites and more avant-garde web experiences with only a single line of HTML.
Adding Plinthos Content to your website
When you're embedding a Plinthos Kit in an existing website or adding it to a new build, the method is the same.
Log into the Plinthos Tools and copy your Snippet.
Paste the Snippet into your page right after the closing body tag.
Creating a Snippet
This example will run through how to create the most basic possible Plinthos Snippet that adds a 3D background to a website.
Log into Plinthos Tools
Go to https://tools.plinth.digital and log into your account to get started.
Click on the "Snippets" button on your desired kit.
Click the "Add new" button.
Give the Snippet a Name and Description. For the name, we recommend the url of the site that you intend to embed the snippet in.
Under the "Page Background" heading, select a Stage Key from the dropdown list.
Select a Piece of Content from the dropdown list that appeared below.
Scroll to the bottom of the form and click "Save".
Wait for the save confirmation.
Scroll back to the top of the page to see your code snippet.
Using an existing Snippet
Go to https://tools.plinth.digital and log into your account to get started.
Click on the "Snippets" button on your desired kit.
Select the Snippet you wish to use from the dropdown list.
TIP
No Snippets in the menu? You need to create one first. Check out Creating a Snippet
Copy the HTML code in the Snippet text box or click the "Copy" button.
Your snippet should look something like this:
html
<script src="https://snippet.plinth.digital/n3x4mp130n1y.js" type="module"></script>Simply copy paste your snippet into the HTML of your website, right after the closing </body> tag but before the closing </html> tag.
html
<!DOCTYPE html>
<html>
<head>
<!-- Your website's header content -->
</head>
<body>
<!-- Your website's body content -->
</body>
<script src="https://snippet.plinth.digital/n3x4mp130n1y.js" type="module"></script>
</html>Preparing your site for Plinthos
In many cases, simply dropping in the Snippet with a background configuration will be enough to display a Plinthos Content but all sites are built differently and some more elaborate setups will require extra elements to be added. In this section we will run through a few checks and considerations to ensure everything is displaying as expected.
Viewport Meta Important
A viewport meta tag must be set in your website's header or else Plinthos will not display on mobile devices.
The following is recommended:
html
<meta name="viewport" content="width=device-width, initial-scale=1.0">Most mobile-friendly sites will already have a tag like this set.
Click here for more general information about the viewport meta tag
Clearing the background
Sometimes it might appear that Plinthos is not rendering when it fact it is just hidden behind your website's existing background.
Plinthos attempts to clear the background of your website if a background Render Target is set but sometimes other elements get in the way. If your website has content containers that set their own background color or image, these need to be removed before your Plinthos Content will be visible. This can be done with basic css:
css
.app { /* Selector will vary depending on your site */
background: none;
}
/* OR */
.container { /* Selector will vary depending on your site */
background: none !important;
}In some cases the !important modifier might be expedient but it should generally be avoided if possible.
Adding <canvas> elements for Render Targets
Each Canvas Render Target defined in your Snippet Configuration requires a corresponding <canvas> element to display its Content on. The canvas must be linked to Plinthos by defining a Canvas Selector in the Snippet Configuration.
Consider the following example:
html
<html>
<body>
<canvas id="plinthos-embed"></canvas>
</body>
</html>In order to display Content on this <canvas> element, the Canvas Render Target configuration should have its Canvas Selector set to "#plinthos-embed".
If the id attribute of the <canvas> element is not appropriate for use by Plinthos (e.g., it is generated on page load or is used by another process), using a data attribute is fine:
html
<html>
<body>
<canvas data-plinthos-display="embed"></canvas>
</body>
</html>The Canvas Selector for this example would be [data-plinthos-display="embed"].
All done
With the Plinthos Snippet in your website's HTML, you can now update the content that it shows by making changes to the snippet configuration from the Plinthos Tools.
This means instant updates without further code changes.