Site.pro
  • Website Builder
    • Website Builder
    • Prices
    • Website Import
    • Online Stores
    • Plugins
    • Collaboration
    • Templates
    • Languages
    • Affiliate Program
    • Examples
    • AI Website Builder
    • For Design Studios
    • We Build for You
  • Domains
  • Email
  • Learn
    • Tutorials
    • Blog
    • FAQ
    • Growth Hacking
    • For Hostings
    • Domainity
    • For Education
  • For Resellers
    • Prices
    • White Label
    • Revenue Share
    • Panels
    • How it Works
    • Mass Import
    • Our Partners
    • Reselling Examples
    • Marketing Materials
    • Documentation
    • Free Websites
  • Website Builder
    • Website BuilderEverybody can easily create a website, landing page, or e-commerce store.
    • PricesSite.pro Prices: Templates 200+, Websites, Basic Builder Functions, Online Stores
    • Website ImportTransfer your existing website from anywhere to Site.pro website builder
    • Online StoresSell your goods or services anywhere on the website
    • PluginsMany functions and plugins depending on geographical preferences
    • CollaborationCollaborative Website Builder, Create a website with teammates in real-time in one space
    • Templates
    • Languages
    • Affiliate Program
    • Examples
    • AI Website Builder
    • For Design Studios
    • We Build for You
  • Domains
  • Email
  • Learn
    • TutorialsVideos for Beginners
    • BlogWebsite Builder Lifehacks:Shared hosting tips. Web Design, Marketing
    • FAQHelp center. Payment Issues. Basic Tutorial. Quick search.
    • Growth HackingBoost your sales. Strategy
    • For HostingsEducation. Generate more website builder sales
    • DomainityDomainity: Domain quantity per 1000 people
    • For EducationFree Website Builder for Online and Offline Classrooms
  • For ResellersWhite Label
    • PricesStart reselling. Pay for live websites. Free Websites
    • White LabelThe most popular white label tool is ideal for reselling
    • Revenue ShareWebsite Builder: Provide free website builder and earn 50% commissions
    • PanelsOne product for all platforms. Download plugin for your panel
    • How it WorksCloud or On-Premises. Recommendations for Builder Server
    • Marketing MaterialsVideo. Mockups. Website Blocks. Marketing Materials.
    • Mass Import
    • Our Partners
    • Reselling Examples
    • Documentation
    • Free Websites
  • inputRegister

    Register

    (Buy Domain, Create email)
    (For Hosting Companies)
    By registering, you accept our Terms of Service
    Number of Customers: 1-100
    Number of Customers: 1-100
  • Log in

    Log in

    New user? Create account
    Forgot password?
  • $
  • English
Server Requirements
  • Published websites
  • Site.pro IPs
Builder installation / update
On-Premises
  • Server Requirements
  • Installation
  • CRON
  • Update
  • Migration to version v4
  • Collaboration Service
  • Extra configuration
  • Manual update
  • Changing PHP version
  • Support
Plugin installation
  • Hosting Panel
    • cPanel
    • DirectAdmin
    • Plesk
    • Sentora/ZPanel
    • ISPmanager
    • InterWorx
    • Vesta
    • Hosting Controller
    • CentOS Web Panel
    • Hestia
    • LiveConfig
    • Webuzo
    • Custom hosting (API)
  • Billing Panel
    • WHMCS
    • Blesta
    • Custom billing (API)
API documentation
  • Builder
    • Create session (SSO)
    • Remove existing session
    • Create website backup
    • Restore website backup
  • Templates
    • List template categories
    • List template category tags
    • 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
    • Delete website
    • Get website template
    • Get website pages
    • Get website variables
    • Get template 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
    • Read/add/delete hosting plans
  • Integration with your system
    • Allow/disallow domain in builder
    • Check if domains are allowed in builder
  • FAQ
    • Get posts
    • Get categories
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 2011. Website Builder. United States.
Contact SalesTerms of Service