Differences

This shows you the differences between two versions of the page.

--- blocks:app-note:google-web-designer [2023-08-09 13:06]
melvin Improve WebSocket URL description
+++ blocks:app-note:google-web-designer [2023-08-10 09:35]
melvin Upload GWD component ZIP
@@ Line 5: / Line 5: @@
 ===== Installing the PIXILAB Blocks Property custom component =====
-To install the PIXILAB Blocks Property custom component, download [[ZIP_LINK|this ZIP file]] and install it according to the [[https://support.google.com/webdesigner/answer/6171409?hl=en&ref_topic=6175722|official installation instructions]].
+To install the PIXILAB Blocks Property custom component, download {{ :blocks:app-note:google-web-designer:blocks-gwd-component.zip |this ZIP file}} and install it according to the [[https://support.google.com/webdesigner/answer/6171409?hl=en&ref_topic=6175722|official installation instructions]].
 ===== Using the PIXILAB Blocks Property custom component =====
-When placed in a Google Web Designer document, the PIXILAB Blocks Property component provides a set of events and actions for getting and setting the value of a specific Blocks property. The "Property changes", "Property becomes true" and "Property becomes false" events can be used to react to property changes, and the "Set property value" action can be used to set the value of the property.
+When placed in a Google Web Designer document, the PIXILAB Blocks Property component provides a set of events and actions for getting and setting the value of a specific Blocks property. The "Property changes", "Property becomes true" and "Property becomes false" events can be used to react to property changes, and the "Set property value" action can be used to set the value of the property. PIXILAB Blocks Property components are visible in the Google Web Designer editor, but will not be visible in the final result.
-:!: **Note:** PIXILAB Blocks Property components are visible in the Google Web Designer editor, but will not be visible in the final result.
+A PIXILAB Blocks Property component must be configured before it can be used: Select the component, open the Properties tab and scroll down to the "PIXILAB Blocks Property" section. Set the property path and choose whether to subscribe to property changes or not.
-A PIXILAB Blocks Property component must be configured before it can be used: Select the component, open the Properties tab and scroll down to the "PIXILAB Blocks Property" section. Set the property path and choose whether to subscribe to property changes or not:
 {{ :blocks:app-note:google-web-designer:properties-section.png?nolink&300 |}}
+:!: **Tips:** To easily determine the path of a Blocks property, you can create a "dummy" Task (on the Tasks page in the Blocks editor), set the trigger to "Property change" and select the property using the dropdown menus. When you have selected the property, you can click the pen icon to bring up the property path, which can be copied.
 When using the "Preview" functionality in Google Web Designer, or if the final result is not going to be served by the Blocks server, the WebSocket URL to the Blocks server must be specified. Open the "Code view" and add the following lines at the top of the main HTML file, under the "<head>" tag: