Site.pro
  • Website Builder
    • Website Builder
    • Online Stores
    • Templates
    • Domains
    • Plugins
    • Languages
    • FAQ
    • Affiliate Program
    • Blog
    • Examples
    • For Design Studios
  • Prices
  • Website Import
  • For Resellers
    • White Label
    • Prices
    • Panels
    • How it Works
    • Free Websites
    • Marketing Kit
    • Mass Import
    • Our Partners
    • Free Website Builder
    • Documentation
    • Blog
    • Growth Hacking
    • Domainity
    • FAQ
  • Contact Sales
  • Website Builder
    • Website BuilderEverybody can easily make a website, landing page or e-commerce.
    • Online StoresSell your goods or services anywhere on the website
    • Templates200+ Awesome Templates. Responsive Design
    • DomainsBuy domain. Connect Your Domain. Transfer Domain.
    • Plugins
    • Languages
    • FAQ
    • Affiliate Program
    • Blog
    • Examples
    • For Design Studios
  • Prices
  • Website Import
  • For ResellersWhite Label
    • White LabelThe most popular white label tool is ideal for reselling
    • PricesStart reselling. Pay for live websites. Free Websites
    • PanelsOne product for all platforms. Download plugin for your panel
    • How it WorksCloud or On-Premises. Recommendations for Builder Server
    • Free WebsitesUnlimited Quantity of Free Websites
    • Marketing KitUse White Label Marketing Kit To Increase Your Sales
    • Mass Import
    • Our Partners
    • Free Website Builder
    • Documentation
    • Blog
    • Growth Hacking
    • Domainity
    • FAQ
  • Contact Sales
  • inputRegister
    Sign Up with Facebook
    Sign Up with Google
    or
  • faceLog In
    Sign in with Facebook Sign in with Google
    or
    Remind password
    A new password will be sent to the specified e-mail address.
    Return to login form
  • $
    • USD — $
    • EUR — €
    • GBP — £
    • BRL — R$
    • PLN — zł
    • INR — ₹
    • TRY — TL
    • AUD — A$
    • CAD — C$
    • CZK — Kč
    • DKK — kr
    • HKD — HK$
    • HUF — Ft
    • ILS — ₪
    • JPY — 円
    • MXN — Mex$
    • NOK — kr
    • NZD — NZ$
    • PHP — ₱
    • RUB — ₽
    • SGD — S$
    • SEK — kr
    • CHF — Fr
    • TWD — NT$
    • THB — ฿
    • CNY — ¥
    • RSD — din
    • BGN — лв.
    • RON — Lei
    • ZAR — R
    • BYN — p.
    • UAH — ₴
    • KZT — ₸
    • CLP — CH$
  • English
    • العربية
    • Azərbaycan
    • Bahasa Indonesia
    • Bahasa Malaysia
    • Беларуская
    • Български
    • Bosanski
    • Castellano
    • Čeština
    • Dansk
    • Deutsch
    • Eesti
    • Ελληνικά
    • English
    • Español
    • 繁體
    • فارسی
    • Français
    • Հայերեն
    • हिन्दी
    • Hrvatski
    • Italiano
    • עברית
    • 简体
    • ქართული
    • Қазақ
    • Latviešu
    • Lietuvių
    • Magyar
    • Nederlands
    • 日本語
    • Norsk
    • O'zbek
    • ภาษาไทย
    • ភាសាខ្មែរ
    • Polski
    • Português (BR)
    • Română
    • Русский
    • Schweizerdeutsch
    • Slovenčina
    • Slovenščina
    • Srpski
    • Suomi
    • Svenska
    • Tiếng Việt
    • Türkçe
    • Украї́нська
    • Wikang Tagalog
    • And additional 2 languages inside Site.pro website builder
Server Requirements
  • Published websites
  • Site.pro IPs
Builder installation / update
On-Premises
  • Server Requirements
  • Installation
  • CRON
  • Update
  • Migration to version v4
  • Extra configuration
  • Manual update
  • Changing PHP version
  • Support
Plugin installation
  • Hosting Panel
    • cPanel
    • DirectAdmin
    • Plesk
    • Sentora/ZPanel
    • ISPmanager
    • InterWorx
    • Vesta
    • Hestia
    • Hosting Controller
    • CentOS Web Panel
    • Custom hosting (API)
  • Billing Panel
    • WHMCS
    • Custom billing (API)
API documentation
  • Builder
    • Create session (SSO)
    • Remove existing session
    • Create website backup
    • Restore website backup
  • Templates
    • List template categories
    • List templates
    • Get page types available in templates
  • Import
    • Import website
    • Get website import status
    • Import website block
    • Get website block import status
    • Check if imported website is owned by user
  • Websites
    • Create website
    • Modify website
    • Rename website
    • Publish website
    • Edit website pages
    • Edit website settings
    • Enable/disable Auto Layout
    • Delete website
    • Get website template
    • Get website pages
    • Get website variables
    • Get website settings
    • Add pages to website
    • Duplicate pages in website
    • Remove pages from website
  • Website Blocks
    • Create empty website
    • Modify website
    • Inspect website
    • Add empty page
    • Modify page
    • Remove page
    • Inspect page
    • Inspect composition
    • Modification descriptor structure by element type
    • Add blocks from compositions
    • Remove blocks
    • Move blocks
    • Modify blocks
    • Inspect block
  • Licenses
    • Get list of published websites
    • Get statistics of publications/openings
    • Block/unblock published website
    • Controlling IP list
  • Integration with your system
    • Allow/disallow domain in builder
    • Check if domains are allowed in builder
Add-ons documentation
  • For Website
    • Public demo URL
    • Editing plans
    • User registration from public demo
    • Website import
  • For Builder
    • Adding custom templates
    • Adding custom builder plugins
    • Scripts
For developers
  • Programming reference
  • Directory structure
  • Meta information (main.json)
  • Frontend logic (main.js)
  • Element template (main.html)
  • Backend logic (main.php)
  • Plugin testing
  • Custom element plugin
  • E-commerce plugin
  • Overriding UI
  • Other examples
Change Log
For developers

Custom element plugin Cloud On-Premises

Plugin must use PluginWrapper.registerPlugin() method to register a custom element with its property dialog definition, saving/loading and other event handlers.

Custom element plugin example (Vimeo video player)

main.html:
<iframe
	id="{{id}}_vimeo"
	src="http://player.vimeo.com/video/{{content.groupId}}?portrait={{content.portrait}}&title={{content.title}}&autoplay={{content.autoplay}}&color={{content.color}}"
	width="{{width}}px"
	height="{{height}}px"
	frameborder="0"
	webkitallowfullscreen
	mozallowfullscreen
	allowfullscreen
></iframe>

main.js:
PluginWrapper.registerPlugin('vimeo', {
	name: 'Vimeo',
	element: {
		minSize: {width: 100, height: 100},
		defaultSize: {width: 480, height: 300},
		resizable: true
	},
	propertyDialog: {
		noScroll: true,
		tabs: [
			{children: [
				{type: 'VerticalLayout', children: [
					{type: 'Label', text: __('Vimeo ID or URL'),
						helpText: __('Vimeo video id or url with format https://vimeo.com/{video_id}')
					},
					{type: 'TextField', id: 'groupId'}
				]},
				{type: 'HorizontalLayout', css: {marginTop: 15}, children: [
					{type: 'VerticalLayout', children: [
						{type: 'Label', text: __('Portrait'), helpText: __('Show the user’s portrait on the video')},
						{type: 'RadioBox', id: 'portrait0', label: __('Yes'), group: 'portrait'},
						{type: 'RadioBox', id: 'portrait1', label: __('No'), group: 'portrait'}
					]},
					{type: 'VerticalLayout', children: [
						{type: 'Label', text: __('Title'), helpText: __('Show the title on the video.')},
						{type: 'RadioBox', id: 'title0', label: __('Yes'), group: 'title'},
						{type: 'RadioBox', id: 'title1', label: __('No'), group: 'title'}
					]},
					{type: 'VerticalLayout', children: [
						{type: 'Label', text: __('Autoplay'), helpText: __('Play the video automatically on load.')},
						{type: 'RadioBox', id: 'autoplay0', label: __('Yes'), group: 'autoplay'},
						{type: 'RadioBox', id: 'autoplay1', label: __('No'), group: 'autoplay'}
					]},
					{type: 'VerticalLayout', children: [
						{type: 'Label', text: __('Color'), helpText: __('Specify the color of the video controls.')},
						{type: 'ColorSelector', id: 'color'}
					]}
				]}
			]}
		]
	},
	resizeTimeout: null,
	resizeAction: function(data, elem) {
		if (!this.resizeTimeout) {
			var self = this;
			this.resizeTimeout = setTimeout(function () {
				self.resizeTimeout = null;
				self.updateElement();
			}, 1000);
		}
	},
	openAction: function(fields, data, elem) {
		fields.groupId.setText(data.content.groupId);
		fields.portrait0.setValue(data.content.portrait === '1');
		fields.portrait1.setValue(data.content.portrait === '0');

		fields.title0.setValue(data.content.title === '1');
		fields.title1.setValue(data.content.title === '0');

		fields.autoplay0.setValue(data.content.autoplay === '1');
		fields.autoplay1.setValue(data.content.autoplay === '0');

		fields.color.setValue(data.content.color);

		fields.groupId.on('change', function() {
			var url = fields.groupId.getText();
			var regExp = /https:\/\/(www\.)?vimeo.com\/(\d+)($|\/)/;
			var match = url.match(regExp);
			if (match) {
				fields.groupId.setText(match[2]);
			}
		});
	},
	applyAction: function(fields, data, elem) {
		if (fields.portrait0.getValue()) data.content.portrait = '1';
		if (fields.portrait1.getValue()) data.content.portrait = '0';

		if (fields.title0.getValue()) data.content.title = '1';
		if (fields.title1.getValue()) data.content.title = '0';

		if (fields.autoplay0.getValue()) data.content.autoplay = '1';
		if (fields.autoplay1.getValue()) data.content.autoplay = '0';

		data.content.color = fields.color.getValue().replace('#', '');
		data.content.groupId = fields.groupId.getText();
	},
	loadAction: function (data) {
		if (!data.content.groupId) data.content.groupId = '7976699';
		if (!data.content.portrait) data.content.portrait = '1';
		if (!data.content.title) data.content.title = '1';
		if (!data.content.autoplay) data.content.autoplay = '0';
		if (!data.content.color) data.content.color = '#00adef';
	}
});
© Site.pro Website Builder. United States, Washington. Terms of Service