The Custom JS App “Dynamic Text from CSV” allows you to change the text of almost any Box element dynamically, based on the values of form input data (both historical from dataLayer and current form inputs) and driven by data in a hosted CSV. Supported elements are buttons, radios, dropdowns, checkboxes, and text elements. The app retrieves the text to display from a CSV file specified by metadata at the Box page level.
Configuring Metadata
To use this app, you need to configure the metadata at the page level with the following key and value:
Key: dyn_text_csv_url
Value: The URL of the Google Sheets CSV file/tab, or Digioh-hosted CSV file.
Ensure the hosted CSV is readable to the Internet.
CSV File Structure
The CSV file should have the following columns:
Field: The custom field identifier (e.g., custom_1, custom_2, custom_3, etc.).
Val: The value of the custom field that triggers the text change.
Element: The ID of the HTML element whose text will be changed.
Text: The text to display in the HTML element.
How It Works
Initialization: The app searches for the metadata on the page with the key dyn_text_csv_url.
CSV Retrieval: It fetches the CSV data from the specified URL.
Element Configuration: Based on the CSV data, the app sets up dynamic text changes for the specified elements.
Event Handlers: The app attaches event handlers to buttons, radios, dropdowns, and checkboxes. Each interaction with an element sets a corresponding custom field in the data layer. For example, when a button associated with custom_1 = Apple is clicked, the data layer is updated to have custom_1 with the value Apple. The app then checks the CSV file for custom_1 and its value. If a matching entry is found, it updates the text of the specified element according to the CSV file. This way, whenever an element is interacted with (e.g., button click, radio selection, dropdown change, checkbox toggle), the app dynamically updates the corresponding text elements based on the CSV data.
Questions? Comments? Let us know at support@digioh.com