1. Google Map
2. Google Map Pro
3. MailChimp
4. Disqus
5. Countdown Timer
6. Accordion
7. Tabs
8. Popup
9. Progress bar
10. Slideshare
11. PayPal Button
12. Iframe
13. Embed
14. Breadcrumbs
15. Google Calendar
16. Google Search and Google Search Results
17. Scroll To
18. Counter
19. Circular Progress Bar
This widget allows you to use the "Google Map" application on your site’s pages.
Following features can be used for editing Google Map: "Address", "Zoom", "Height", "Spacing".
"Address" - represents your location address on the map. You can use town and country details within the mentioned field, so widget will automatically find required results. Valid example: https://www.google.com/maps/place/London,+UK
If you use invalid details - you will see that the map won't show any particular location.
"Zoom" - increases/decreases zoom level (visual distance) within the widget. Minimum zoom level - 0. Maximum zoom level - 20.
"Height" - increases/decreases widget’s height on page. Minimum height - 100px. Maximum height - 5000px.
"Spacing" - is a common widget feature.
Google Map Pro
This widget allows you to use advanced version of Google Map where you can create initial map center, place markers, select various theme types and also enable various map controls.
"Connect" button allows you to use Google Map Pro with the help of generated API key. You can read detailed instruction on how to create Google Map API Key here.
You will see the following features once you've connected Google Map: "Edit Connection", "Set Initial Map Center", "Markers", "Zoom", "Height", "Theme" and a number of Map Controls.
"Edit Connection" - this feature allows you to edit your Google Map API Key.
"Set Initial Map Center" - this feature allows you to create a centered area on the map, making a focus on the map markers.
Please make sure to specify required centered location via "Search" field and press "Search" button. It will automatically center selected map zone. Don't forget to Apply the results.
"Markers" - this feature allows you to place customizable markers on any selected location.
Type necessary map location via "Search" field, press "Search" button and use "Add Marker" button to create a marker.
Type your marker's "Title", "Caption" and select "Marker Icon". Please notice that you can not add another marker while adding/editing current marker.
Once you apply the changes - you can edit/remove current marker or add new marker.
"Zoom" - this feature increases/decreases zoom level (visual distance) within the widget. Minimum zoom level - 0. Maximum zoom level - 20.
"Height" - this feature increases/decreases widget’s height on page. You can set up the height for each device separately using the corresponding device icons.
"Theme" - this feature allows you to change the appearance of the Google Map Pro widget. You can choose one of the following themes: "Standard", "Silver", "Retro", "Dark", "Night" and "Aubergine".
Map Controls - this block contains the following number of features: "Map Type Switcher", "Zoom", "Street View", "Rotate", "Scale" and "Fullscreen". You can read more about each feature directly here.



To connect your account please click "Connect Account" button. If you haven't created such account - please use "Create Account" link under the mentioned button and create account first.
Once you click on "Create Account", you will be prompted to MailChimp website. Click "Sign up for free" to proceed further.
After you click "Sign up for free", you will be prompted to signup form where you need to specify your email, username and password.
Once you completed the signup, you will be informed to check your email for further instructions and in case you didn't receive it use "Didn't get an email?".
In the email that you received, click "Activate Account" to proceed further.
In a new window, confirm that you are not a robot.
In another new window, you will get a series of questions. Fill in your First Name and Last Name first.
In the second step, tell Mailchimp about your business. This information will appear in your emails to help your recipients find your organization. Enter the name of your business and your website name.
In the third step, tell Mailchimp your physicall address. Mailchimp needs a physical address to make sure your emails comply with international anti-spam laws. If you do not want to specify it, use a physicall address alternative.
In the fourth step, Mailchimp will ask you if you have an e-Commerce (online shop) on your website. If you sell online, Mailchimp will help you get your store integrated with your account so you can send targeted emails to e-commerce customers, track ROI (Return On Investment), and more. If you do have it, answer "Yes", if not - "No".
The next step will ask you if you have a list of email subscribers (These are people who have signed up to receive marketing emails from your organization.) Three options are available - "Yes", "No" and "I'm not sure...".
The last step is "Connect social media". This step is optional. It's beneficial if you want to share your campaigns with followers and create social posts.
After this you will see a new window confirming that your account is ready and you can subscribe for a newsletter from Mailchimp (optional). Click "Let's Go!" button to proceed further.
Go to the "Lists" tab and click on your created list to configure it.
In case you want to use another List, click on the "Create List" button.
In a new window click "Settings" - "List fields and *|MERGE|* tags".
"List fields and *|MERGE|* tags" is the area where you can manage and create fields for your MailChimp List.
"Default merge tag" feature allows you to set default value for your tags. For example, you can set the default value for your first name tag to "Friend." When you use "Hello *|FNAME|*," in a campaign, subscribers whose first names are not in the system will see "Hello Friend."
You can learn more about Lists here - getting started with Lists, manage List and Signup form fields and set default merge values for a list.
"Enable Double Opt-in" - this feature includes an extra confirmation step that verifies each email address. If you enable this setting, the user subscription will be pending till the confirmation. User must manually confirm the subscription via email and then you will receive a confirmation that new user has subscribed for your newsletter.
!Important! Our "MailChimp" widget supports 4 Form Fields from the MailChimp List: "Email", "First Name", "Second Name" and "Agreement". Using more Form Fields in your MailChimp List will result in subscription failure.
If you need a form with more fields it's better to use an Embedded MailChimp form and paste it into your Embed widget.
In order to get the MailChimp API key, click on your MailChimp Profile.
Afterwards, click on Extras - API Keys.
Inside new window click Create a Key.
Under Your API keys you will see your created API key and you will be able to copy and paste into the "MailChimp" widget in your admin panel.
Copy and paste your "MailChimp API Key" within the appropriate field and save the results.
If you've created a list (tool which allows you to manage your contacts or subscribers) - such list will appear within the "Choose List" section. Otherwise only "None" option will be available.
To edit your account you need to click "Edit" button.
Form Fields
There are presented 4 main fields within the "Form Fields" block: "Email", "First Name", "Second Name", "Agreement". All fields can be removed (except an "Email" field). You can enable mandatory feature (*) for each field separately by using Field Mandatory button (“*”) on the right side of each field.
Each field of the "Form Fields" block can also be renamed:
"Agreement" field text can be edited and customized via "Edit" button.
To edit this text please enable "Label" switcher and customize text with various styles or set redirect link via "Link" button.
Form Settings
This block allows you to edit form field’s status messages. There are presented the following fields: "Subscribe Button", "Subscription successful", "Subscription error", "Repeated subscription error", "Error Message for Mandatory Fields", "Email Field Error".
Each field of the "Form Settings" block can also be renamed:
Actions after form submission
This block allows you to enable a special action after form submission: Go to Page, Open Popup, Go to Blog, Go to Blog Post, Open URL, Open in Lightbox.
"Reset Form" - this feature will automatically clear all form fields after submission.
"Animation" - is a general setting of each widget.
"Design" tab allows you to customize "MailChimp Contact Form" appearance. Available presets are located within the list of "Preset Name" section.
"Checkbox Text Style" feature allows you to change the appearance of the "Agreement" checkbox field from the "Form Fields" block by selecting any present text style.
To change "Subscribe" button appearance you need to choose one of available button presets within the "Subscribe" section.
"Button" size can be customized within the "Size" section. There are available 3 sizes: "Small", "Medium" and "Large".
Disqus
This widget allows you to create commentary form on your site's page.
Disqus widget consists of "Properties" area and "Display" block.
If you haven't created a "Disqus" account yet - please use "Create New" link in the description within the Properties area.
All you need to do is to connect your existing account and identify your site on Disqus. For this you need to click the "Connect" button.
You need to specify your "Shortname" within the appropriate field in order to connect your site.
You can also edit/remove "Shortname" within the Settings - Integration section in the Control Panel.
Once the "Shortname" is specified, you will see the disqus commentary form on your page.
"Language" - this feature allows you to choose necessary language for your commentary form. The following languages are present in this feature: "English", "Russian", "German", "Japanese", "Swedish", "Italian", "Dutch", "Ukrainian", "French", "Polish", "Portuguese (Brazil)", "Suomi", "Serbian", "Turkish", "Latvian", "Norwegian Bokmål", "Norwegian Nynorsk", "Indonesian".
"URL Rules" - this feature allows you to set specific URL rules: "Absolute URL Based On Control Panel Settings"or "Absolute URL Without Control Panel Settings". If you've enabled Absolute URL based on control panel settings - widget will show commentaries on the page until you change page's URL. They will disappear once it's changed. On the other hand, such feature as Absolute URL without control panel settings is set by default and commentaries won't be affected by changes in the SEO settings.
The "Display" block has the following common features: "Spacing", "Visible On".
Countdown Timer
This widget allows you to place countdown timer on the site's page.
Widget is separated into two tabs: "Settings" and "Design".
"Settings" tab contains the following blocks: "General Countdown Timer Settings", "Date Format", "Display", "After Countdown is Complete" and "Animation".
General countdown timer settings has a "Type" feature which allows you to use "Event Date" or "Timer" types for counting down a future event or a one day event.
If "Event Date" type is selected, you can edit the following features: "Target Date", "Time", "Event Timezone", "Language".
"Target Date" - this feature allows you to set expiration date of the action/event on your site's page.
"Time" - this feature allows you to see how much time is left until the expiration date.
"Event Timezone" - this feature allows you to set necessary timezone for the action/event.
"Language" - this feature allows you to set required language for the date types (years, days etc.). The current languages are: "Arabic", "Catalan", "Chinese Simplified", "Chinese Traditional", "Czech", "Danish", "Dutch", "English", "Finnish", "French", "German", "Greek", "Hungarian", "Indonesian", "Italian", "Japanese", "Korean", "Lithuanian", "Malay", "Norwegian", "Polish", "Portuguese", "Russian", "Spanish", "Swedish", "Turkish", "Ukrainian", "Vietnamese".
If "Timer" type is selected, you can configure the following features: "Time", "Language".
"Time" feature allows you to set time for a one day event up to 24 hours.
"Language" - this feature allows you to set required language for the date types (hours, minutes etc.).
"Date Format" block allows you to enable/disable date types and delimiter type within the Countdown Timer.
"Display" block allows you to edit the following settings: "Spacing", "Devices", "Alignment", "Visible On" they are the common widget features.
"After Countdown is Complete" block allows you to set specific action for the countdown timer when event expires. You can stop timer at 0, hide counter or redirect event to the specific URL.
"Animation" - is a general setting of each widget.
"Design" tab allows you to customize "Countdown Timer" appearance. Available presets are located within the list of "Preset Name" section.
Accordion































!Important! Due to specifics of the Tab widget only the following widgets can be placed within the "Item" section:
Widgets: Structure - "Row".
Widgets: Basic - "Text", "Image", "Button", "Divider", "Space", "Contact Form".
Widgets: Galleries - all galleries.
Widgets: More - "Progress Bar", "PayPal Button", "Countdown Timer", "Google Map".
You can change the position of tabs by dragging them one over another.
"Heading Format" feature allows you to enable H2, H3 and H4 tags for the headings to improve the SEO part of the Tabs widget's content.
There are two types of tabs: Vertical and Horizontal.
If you choose "Horizontal" type - you can enable/disable "Justified Titles" feature which stretches the titles along the width of widget's area.
If you choose the "Vertical" type - you can choose the type "Panel Width" - it can be "Responsive" or "Fixed".
"Responsive" - this feature allows you to configure tab width in percents, which affects the appearance of tabs on the PC and tablet versions (this feature can't be edited on mobile devices).
"Fixed" - this feature allows you to configure tab width in pixels.
"Panel Position" - this feature allows you to change the position of your tabs from left to right and from right to left.
"Titles Alignment" feature allows you to re-align title along the tab's area.
"Icons Alignment" feature allows you to re-align icon along the tab's area.
The "Display" block consists of "Spacing", "Visible On" features which are the common widgets features.
The "Animation" is a general setting of each widget.
"Design" tab allows you to customize "Tabs" widget appearance. Available presets are located within the list of "Preset Name" section.
Popup
Popup widget allows you to make any existing popup appear/reappear under specific conditions on your website's page.
Popup widget consists of "Properties" area which allows you to use the following features: "Select Popup", "Appearance Condition", "Reccurence Condition".
"Select Popup" feature allows you to select an existing popup from the "Pages" section of your site's Control Panel.
If you haven't created any popup yet, "Popups" are located in the "Pages" section that can be found within the navigation menu of your site’s Control Panel.
In order to create new popup please click on the "Add Popup" button.
"Popup's Name" must be specified within provided section.
"Appearance Condition" - this feature allows users to specify the popup appearance condition. There are two options available: "Over Time" for popup appearance after a certain amount of time and "Placement" for popup appearance after the visitor scrolls down to a section where the popup is located.
If "Over Time" condition is selected, you can use a "Delay" feature for popup appearance within 24 hour time period.
If "Placement" condition is selected, you can only edit its "Reccurence Condition".
"Reccurence Condition" - this feature allows users to specify the popup recurrence condition after which the popup will be shown again. The following reccurence conditions are available: "Once per Session", "Fixed Amount of Times", "Over Time", "Always".
"Once per Session" feature allows to set the popup to appear only one time per browsing session.
"Fixed Amount of Times" feature allows to set how many times the popup should appear agaon on a visited page. You can set it up to 10 times.
"Over Time" feature allows to set time when te popup should appear again on a visited page. It consists of "Days" and "Hours" features.
The "Days" feature can be configured from 0 to 365 days.
The "Hours" feature can be configured from 0 to 23 hours.
The "Always" feature makes the popup appear again regularly on a visited page.
Progress Bar
This widget can be used for showing a particular milestone on your website.
"Progress Bar" widget is separated into two tabs: "Settings" and "Design".
The "Settings" tab consists of the following blocks: "Items", "Display", "Animation".
The "Items" block allows you to create a new item with the "Add" button.
"Add Item" window consists of the following features: "Title", "Progress Value", "Change the displayed value to", "Background", "Progress Bar", "Border Color".
"Title" - this field contains the name of your "Progress Bar" item.
"Progress Value" allows to display the step of your progress from 0% to 100%.
"Change the displayed value to" feature allows to add a custom text title istead of percent value at the end of your progress bar for the final progress result.
"Background" feature allows to change the color of incomplete progress.
"Progress Bar" feature allows to change the color of complete progress.
"Border Color" allows you to change the color of the "Progress Bar" border.
Once you created an item, you can edit/remove it.
You can change the position of items by dragging them one over another.
The "Display" block has the following common features: "Spacing", "Visible On".
"Animation" - is a general setting of each widget.
"Design" tab allows you to customize "Progress Bar" appearance. It consists of the following features: "Title Text Style", "Progress Text Style", "Bar Height", "Corners", "Progress Bar Corners", "Enable Bar Animation".
"Title Text Style" feature allows you to change the title appearance by selecting any present text style.
"Progress Text Style" feature allows you to change the title appearance at the end of your progress bar by selecting any present text style.
"Bar Height" feature allows to customize the bar's height appearance from 1px to 50px.
"Corners" - this feature allows you to round the left and right corner of the "Progress Bar" widget from 1px to 25px. Default value is set as 0px. In order to increase/decrease corners value you can set the value manually by adjusting the scale with your left mouse button. After adjusting it, you can also slightly increase/decrease the scale by using the keyboard arrow buttons.
"Progress Bar Corners" - this feature allows you to round the progress bar's second corner. If selected, it works together with the "Corners" feature.
"Enable Bar Animation" feature allows to make your progress bar dynamic instead of static.
This widget allows you to place your "Slideshare" presentations on the site's page.
Slidershare widget consists of "Properties" area and "Display" block.
The "Properties" area has the following feature: "Presentation URL".
All you need to do is to copy URL of your presentation and paste it within the Presentation URL field. After that you can preview changes within the Admin Panel or on the live site.
The "Display" block has the following common features: "Spacing", "Visible On".
This widget simplifies site navigation.
"Settings" tab contains the following features: "Home Page", "Icon", "Show Current Page" and "Delimiter".
"Home Page" feature allows you to hide Home page from the Breadcrubmbs navigation or show it either as a regular title without an icon, with an icon or using a combination of title and icon.
"Icon" feature allows you to change the visual image of the Home page in the Breadcrubmbs navigation.
"Show Current Page" feature allows you to hide/show the page from the Breadcrubmbs navigation, which visitor has entered currently.
"Delimiter" feature allows you to change the delimiter sign, which separates home page and other pages in the Breadcrubmbs navigation.
"Design" tab allows you to select a preset for the Breadcrumbs widget. You can modify its visual appearance via Design - Widgets tab.
Google Calendar
This widget allows you to use Google Calendar from your personal Google account on your site.
To add this widget on the site you need to copy/paste Calendar ID into the appropriate field.
If you haven't created a calendar yet - please enter this link and click "Settings" button.
Specify name, description, and timezone for the calendar, and then press "Create calendar".
Find the "Integrate Calendar" section and copy Calendar ID into the appropriate field of your Google Calendar widget.
"Title" - this option allows you to change the name of your calendar.
"Height" - this option allows you to set the visible area height of your calendar's widget visible area.
"Week Starts On" - this feature allows you to set the day when your week starts.
"Default View" - this feature allows you to set either Month, Week or Agenda display of your calendar widget.
"Language" - this feature allows you to select the language of the calendar widget.
"Background Color" - this feature allows you to set the background color of your calendar's widget.
"Controls" tab allows you to enable/disable the following visible controls of the calendar widget: "Title", "Navigation Buttons", "Date", "Print Icon", "Tabs", "Calendar List" and "Timezone".
Google Search and Google Search Results
These combined widgets allow you to use the search on your site and preview the results.
Note: If you haven't configured this widget yet - please proceed to this article first.
Place the "Google Search" widget on the page where the search field should be presented.
Place the "Google Search Results" widget on a separate page, where you would like to preview the results of your search.
The following features can be edited in Google Search widget:
Select the "Google Search" widget and specify the page where search results will appear. You can use an existing page or create a separate page for these purposes.
"Placeholder" - this feature allows you to change the Search title within the field to any other title in any language.
"Icon" - this feature allows you to change the icon's image within the search field.
"Spacing Between Field and Button" - this feature allows you to create a visible gap between the search field on the left side and button on the right side.
"Button Text" - this feature allows you to change the title of the button to any alternative title in any language.
"Design" tab allows you to change the visual look of the Google Search widget via presets, which can be edited within the Design - Widgets tab.
The following features can be edited in Google Search Results widget:
"Search Engine" - this feature allows you to select the engine from the available list of created engines.
"Cache Lifetime (hours)" - this feature will not remove the stored cache of the search results in your browser up to 24 hours. In such a case, search requests can be saved to Google and also they can be saved with the help of paid API's.
"Language" - this feature allows you to select the language of search results you receive.
"Open Results Links In" - this feature allows you to open the page with search results either in a new tab or in the current tab.
"Enable Results Text formatting" - if enabled, this feature allows you to highlight your typed search keyword in the search results to determine the number of keywords in this specific result.
"Results Per Page" - this feature allows you to show up to 10 search results on the page.
"No Results Message" - this feature allows you to change the title of the empty search results page to an alternative title in any language.
"Enable Divider" - this feature allows you to enable/disable divider between each search result.
"Design" tab allows you to change the visual look of the Google Search Results widget via presets, which can be edited within the Design - Widgets tab.
Scroll To

"Anchor" - this field contains unique Anchor ID (link) which points to a particular part of a page.
"Scroll Duration" - this feature allows you to make the transition effect either faster or smoother.
"Content Type" - this feature allows you to use "Scroll To" widget either as an icon or as a text object.
"Animate On" - this feature allows you to enable animation for the icon either when you hover widget with the mouse cursor or show such animation always.
"Icon" - this feature allows you to change the visual icon of the widget.
"Icon Size" - this feature allows you to increase/decrease the size of your icon on various devices.
"Color" - this feature allows you to change the color of your icon.
If "Text" content type is selected, you can change the text of the "Scroll To" widget and it's style.
The Counter widget allows you adding a smooth animated counter to the site page.
"Count from" feature allows you to set a specific digit for the counter to start from (up to 1000000000).
"Count to" feature allows you to set a final digit of the counter (for example, 0).
"Text Style" - this feature allows you to change the style of the digit using various text styles.
"Duration" - this feature allows you to set up the timer counter speed.
Please make sure you're subscribed for MotoCMS updates to enjoy the advantages of the most recent features and improvements by MotoCMS team (such as new widgets in the Widgets: More section).
The Circular Progress Bar widget allows you to use a specific, responsive, round progress bar with progress indicators and thereby flexibly configuring the output of content.
"Fixed Width" - this feature allows you to set the size of the widget in pixels regardless of the width of the column in which it is located.
"Title" - this feature allows you to type the title within the circle of the progress bar.
"Position" - this feature allows you to re-position the title within the widget's area.
"Value" - this feature allows you to set the visible value for the progress bar.
"Change the displayed value to" - this feature allows you to set a different visible value for the progress bar, which is not the same as in the original "Value" bar to illustrate the progress. For example, if you set "Value" in the progress bar as 10% and use 100% for the "Change displayed value to" feature - the value in the center of the widget (where title is also presented) will be 100%, however, visually bar will only reach the 10% mark on the circle.
"Display Unit" - this feature allows you to change the default % unit to any alternative unit.
"Unit Position" - this feature allows you to re-locate the unit's position within the widget's area.
"Spacing Between Text and Numbers" - this feature allows you to create a visual gap between the value and unit.
Design
This tab allows you to modify the visual styles of the widget.
"Title Text Style", "Progress Text Style" and "Unit Text Style" allow you to change the visual appearance on the typed symbols within the widget's area.
"Bar" - this block allows you to increase/decrease the width of the inner progress bar and change it's color.
"Progress" - this block allows you to increase/decrease the width of the progress bar and change's it color. You can also enable/disable the round corners for the progress bar here.
"Bar Animation" block allows you to enable/disable the animation of the progress bar. Also, you can set the speed of the animation of the progress bar via the "Duration" feature.
"Value Animation" block allows you to enable/disable the animation of the value. Also, you can set the speed of the animation of the value via the "Duration" feature.
Comments