Getting started
Polotno Button
Embed Polotno Editor into any website with a simple script and button
Polotno Button is a dedicated script that enables easy and efficient embedding of the Polotno Editor to any website. With just a simple button, you can give your app a new dimension of customization for any design.
Why Use Polotno Button?
There are several key reasons why implementing a Polotno button can significantly benefit your website and business.
- User-Friendly Designing: Online design tools, such as Polotno, push the boundaries of creativity with a precise and user-friendly UI, enabling even non-professionals to create compelling designs. By incorporating the Polotno button into your application, you give your users the tools they need to go beyond traditional design boundaries.
- Seamless Integration: The Polotno button can be seamlessly incorporated into your website without heavy coding or complex functionality.
- Save Time and Resources: With the Polotno button, users can effortlessly craft designs right within your platform. This can reduce the need for external design platforms or software, thereby saving time and resources.
- Boost Engagement: Providing users with the ability to create and customize designs can lead to increased user engagement on your platform.
How to integrate Polotno Button?
- Add the Polotno Button script to your website.
<script src="https://embed.polotno.com/button-v1.js"></script>- Create a button somewhere on your page.
<button id="polotno-button">Open Editor</button>- Initialize Polotno Button with your API key.
<script>
const button = document.getElementById('polotno-button');
button.addEventListener('click', () => {
window.createPolotnoEditor({
key: 'my-api-key',
onPublish: ({ dataURL, json }) => {
// do something with generated image
// also you can save json somewhere and load it later
},
});
});
</script>Polotno Button Options
The Polotno Button can be customized to fit your needs.
function inchesToPx(inches) {
var dpi = 72; // dots per inch
return inches * dpi;
}
window.createPolotnoEditor({
key: 'my-api-key',
// select sections you want to show
sections: [
'templates',
'photos',
'text',
'elements',
'upload',
'background',
'layers',
'size',
],
defaultSection: 'photos', // what section open by default
// initial size of the canvas
width: inchesToPx(20),
height: inchesToPx(10),
// load template from json file
jsonUrl:
'https://api.polotno.com/templates/2021-10-25-instagram-post-sunday-reminder.json',
// load template from json object
json: {
// json object of the design
},
// change default text of the publish button
publishLabel: 'Save',
onPublish: ({ dataURL, json }) => {
document.getElementById('result').src = dataURL;
console.log('json', json);
},
// optionally you can react to any change in the editor
// for example temporary save design somewhere to restore it later via jsonUrl
// you may need to save JSON manually to your server
onChange: ({ json }) => {
console.log('json', json);
},
// you can pass initial uploads to the editor
// they will be shown in the upload section
uploads: [
{
url: 'https://example.com/image.jpg',
preview: 'https://example.com/image.jpg',
},
],
// you can enable or disable animations
// by default animations are disabled
// warning - editor can't export into video or gif yet
// you have to use Cloud API or your own server for that
animationsEnabled: true,
// also you can translate full UI, ask us for the list of keys
translations: {
sidePanel: {
templates: 'Шаблоны',
},
},
});