The String element represents a string value within the Webflow Designer.

String elements cannot be created directly, and are only created as a side effect of creating other element presets that contain text content (e.g. webflow.elementPresets.FormBlockLabel).

See methods below you to retrieve and set the text of a String element.

Properties

Property	Description	Type	Example
`id`	Unique identifier for the element composed of two identifiers, the `component` and the `element`.	`object`	`{component: "64c813...", element: "5edf8e59-71f9..."}`
`type`	Specifies the type of the element.	`string`	’String’
`children`	Indicates whether an element can contain child elements.	`boolean`	`false`
`styles`	Indicates if the element can be styled.	`boolean`	`false`
`textContent`	Indicates if the element can contain text content	`boolean`	`false`
`customAttributes`	Indicates whether an element can have custom attributes	`boolean`	`false`

Methods

`element.getText()`

Retrieves the text value from a String element

Syntax

1 element.getText(): Promise<null | string>

Returns

Promise<string>

A Promise that always resolves to a String value

String Contents of the string element, which may be an empty string.

Example

1 // Get Selected Element
2 const selectedElement = await webflow.getSelectedElement();
3 
4 if (selectedElement?.textContent && selectedElement?.children) {
5 
6   // Get Child Elements
7   const children = await selectedElement.getChildren();
8 
9   // Filter string elements from children
10   const strings = children.filter(child => child.type === "String");
11 
12   // Initialize an array to hold text content
13   let textContent = [];
14 
15   // Loop over string elements to get text
16   for (const myString of strings) {
17     if (myString.type === "String") {
18       const text = await myString.getText();
19       textContent.push(text);
20     }
21   }
22 
23   // Print text
24   console.log(textContent);
25 }

Designer Ability

Checks for authorization only

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Any	Any	Any	Any

`element.setText(text)`

Sets the text value on a String element, overwriting any prior text value.

Syntax

1 element.setText(text: string): Promise<null>

Parameters

text: string - The new text for your StringElement

Returns

Promise<null>

A Promise that resolves to null.

1 // Get all elements and find the first StringElement
2 const allElements = await webflow.getAllElements();
3 const foundElement = allElements.find(el => el.type === "String");
4 
5 if (foundElement) {
6   	// Check that element has the method in order to use it
7     if ('setText' in foundElement) {
8         const elementText = foundElement.setText("Hello Element 🚀"); // Set Text
9     }
10 } else {
11     console.log('Element not found on page');
12 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canEdit	Any	Any	Canvas	Any

1	// Get Selected Element
2	const selectedElement = await webflow.getSelectedElement();
3
4	if (selectedElement?.textContent && selectedElement?.children) {
5
6	// Get Child Elements
7	const children = await selectedElement.getChildren();
8
9	// Filter string elements from children
10	const strings = children.filter(child => child.type === "String");
11
12	// Initialize an array to hold text content
13	let textContent = [];
14
15	// Loop over string elements to get text
16	for (const myString of strings) {
17	if (myString.type === "String") {
18	const text = await myString.getText();
19	textContent.push(text);
20	}
21	}
22
23	// Print text
24	console.log(textContent);
25	}

1	// Get all elements and find the first StringElement
2	const allElements = await webflow.getAllElements();
3	const foundElement = allElements.find(el => el.type === "String");
4
5	if (foundElement) {
6	// Check that element has the method in order to use it
7	if ('setText' in foundElement) {
8	const elementText = foundElement.setText("Hello Element 🚀"); // Set Text
9	}
10	} else {
11	console.log('Element not found on page');
12	}