Connect site widgets to data that lives in the site's Content Library with the Connected Data feature. This enables you to have one source of truth to build websites more quickly, keep websites up-to-date and accurate, ensure site-wide consistency of important information, and more. When sites widgets are connected to fields in the Content Library, you no longer need to manually change the data in each of the widgets.
To access Business Info, in the side panel, click Content, then click the desired type of business content (Business Info, Business Text, Business Images).
Note
In order to connect widgets through Connected Data, the content must be stored in the Content Library. For information on collecting content, see Import and Collect Content.
For data to be connected through Connected Data, it must have a label and content.
-
Label. The label is the unique indication of the content in the library that binds it to the widget on the site. While there are built in labels (for example, the labels for Logo or Social icons fields are predefined), for custom text, make sure the labels you choose are meaningful and unique. This helps you easily pick which content element should connect to which widget and help prevent changing the label in the future.
Warning
Changing the Content Library label while a widget is connected will disconnect the widget.
-
Content. The information (for example, text, image, phone) that is in the Content Library and once connected to a widget displays on the site.
You can populate the Content Library with two types of content: text and images. Each text section in the Business info can contain up to 4000 characters.
Some Content Library fields have predefined labels. For example, the labels for Logo or Social icons fields are predefined. Other fields, such as Collections or non-default business text fields, have custom labels you need to define yourself.
The business data you can connect to the widgets on your site is summarized in the following table:
|
Widgets |
Business Content Data |
|---|---|
|
Text: paragraph, titles |
Business text: all options Business info:
|
|
Icon |
|
|
Image |
Business info (link):
|
|
Map |
Business info: Location |
|
Multi-location (Connected Data only) |
Business info: Locations |
|
Button/Click To Call/Click-to-email (text on button) |
Business info:
|
|
Social Widgets |
|
|
Background Image |
Business images:
|
|
Business hours |
Update via API only |
|
Text & Image Widget |
Image and text |
|
Shape Widget |
|
|
HTML Widget |
Business info:
Business text:
|
|
Contact Form |
Email address |
|
Accordion widget |
Text (inline binding only) |
Note
To connect data to site elements, there must be content in the Content Library. If there is no content, the option to Connect Data does not appear on the site.
Customized Text Styles:
-
If the text style has been customized in the Business Text area, this style will carry over to the connected widget.
-
To reconnect the text to the Theme Text styles, go to the Business Text area and click the Clear Formatting icon for the specific text.
Inherited Text Styles:
-
When you connect text data, it will inherit the Theme Text styles by default unless the style has been customized in the Business Text area.
-
To override the inherited text style, you can change it in the widget’s design editor.
Editing Limitations:
-
Please note that the inline text editing menu is not available for text widgets that are connected to dynamic content.
Note
To connect data to site elements, there must be content in the Content Library. If there is no content, the option to Connect Data does not appear on the site.
To connect to a widget or canvas element*:
-
Right-click on the widget or element you want to connect, and select Connect to Data.
-
Select the desired data using the drop down (only relevant data options are shown).
-
Select Done.
The Connected Data () icon appears on the widget or element indicating that it is connected.
*Section backgrounds can be connected.
*The canvas elements that can be connected are:
-
Classic Editor: row and column backgrounds.
-
Editor 2.0: section backgrounds.
To connect SEO settings and the header HTML
-
In the side panel, click Pages, then click the settings (
) icon for the desired dynamic page.
-
Click Edit Page SEO.
-
Click the Connect Data (
) icon for the desired field.
Tip
Continue to scroll to reach the Header HTML field.
-
Select the desired data using the drop down (only relevant data options are shown).
-
Click Done.
Inline binding is the ability to use Dynamic for a specific word or words within supported widgets. The connected text can be designed and linked just like regular text.
Note
The Content Library design overrides the text editor design for connected text.
To use inline binding for text widgets:
-
Type {{{ in the text editor to trigger the Connect Data pop up.
-
Select the label you want connected.
-
Click Save.
While editing, the label appears in the editor within curly brackets (for example, {{label}} ). The connected text displays after closing the editor. You can also display the connected text by clicking the Connected Data () icon.
Note
Only users with Connected Data in their account see the Connected Data icon, but all users see the label in curly brackets while editing.
Alternatively, you can type the label directly into the text editor surrounded by two curly brackets to connect the text using inline binding. For example, {{content_library.global}}.
To use inline binding for the Accordion widget:
-
Add an accordion widget to the desired page.
-
Open the widget's content tab.
-
Select any accordion item.
-
In the description field text box, click the Data Binding button (
) in the top left of the toolbar.
-
From the connected data popup choose any field you want to connect.
-
The chosen field will be added to the description field as an inline binding item - this indicates you can add static text to the description as well and combine it with the dynamic data.
-
Note
Only the description currently supports inline binding. All other fields (title, image, and button) are static. If not needed, the image and button fields can be hidden.
Disconnect a Widget
To disconnect a widget:
-
Right-click the widget, and click Change connection.
-
In the menu, select None.
For widgets that have content editing menus, if you are already in the widget content editor, you can hover on the blue icon in the top-right corner and click Disconnect.
Disconnecting a widget reverts the text and its style to the previously used style.
To disconnect SEO settings and the header HTML:
-
In the side panel, click Pages, then click the settings (
-
Click Edit Page SEO.
-
Click the Connect Data (
Tip
Continue to scroll to reach the Header HTML field.
-
Click into the drop down list and select None.
-
Click Done.
The content that is being synced through Connected Data can be edited directly in the pop up, in the Content Library, or in the external source (connected to the Content Library) to which it is connected. Remember to republish the site after you make the changes. The design of the connected site elements can be changed at any point.
Connected Data is not just for your site, it is for each and every template you build. The more you use it in your templates, the easier it is for you to move between them and update data.
A template is turned into a connected template by connecting the widgets in the template to the Content Library. A benefit to using a connected template is each time you create a site with the template, all connected elements are automatically populated by data in that site’s Content Library. This saves you time, as opposed to manually entering content into each individual widget on your site. In addition, you only have to update content once in the Content Library and it will update across all relevant connected widgets. For example, if your business phone number changes you can update it in the Content Library once and all connected widgets that display the business phone number will be updated.
To create a connected template you need to create a template, then connect the elements in the template to the Content Library.
To create a template:
-
Log in to your account to access your Dashboard.
-
Click Create New Site.
-
At the top of the page, click Create Template.
-
Browse the list of templates to find one you can use as a starting point for your design. You can hover over a template and click Preview to view the template on desktop, tablet, and mobile screen sizes.
-
Once you know which template you want to use, hover over it and click Create & Customize.
-
Type a name in the Template name field, then click Create & Customize. The name you type here is what will appear in the Custom Templates section.
-
Customize your template in the editor by adding pages and widgets.
-
In the side panel, click Content, then click Business Info and enter placeholder data. Do the same for Business Text and Business Images. The purpose of adding placeholder data is to give the widgets data to connect to in the next step, Connect Template Widgets to Content Library.
Next, you need to connect the widgets in your template to the placeholder data you entered in the Content Library.
To connect data to site widgets:
-
Right-click the widget you want to connect to a data field.
-
From the context menu, click Connect to data.
-
In the Connect Data dialog, select the data field that you want to connect this widget to.
-
Any widget you successfully connect to the data in the Content Library is marked with a blue Connected Data (
When you are finished customizing the template design and connecting widgets, click Done in the upper right corner.
The template will be saved in the Custom Templates section of the template selection page.
-
If you do not see the Connected Data option in a widget’s context menu, it could be that the Content Library is empty. Make sure there is data here.
-
If you do not see a label you are looking for in the menu, double-check that the Content Library element you created with this label has content. You can only connect to empty labels in Template mode.
-
If you do not see updated data in a specific widget, make sure the widget is connected to the correct label.