# Geo Text

### How Does It Work?

Apply the Geo Text data attribute to an element, using a value corresponding to a visitor data property, to dynamically update its text content. Ensure the element has appropriate default text in the event an error occurs or the property is not available.

To prevent potential content flashing, you can apply the Geo Opacity data attribute. When the element's text content changes, its opacity will be set to 1. Take things further by adding custom CSS to your page that targets elements with this data attribute so you can integrate a transition.

### How To Implement

<table><thead><tr><th>Attribute Name</th><th width="266.3333333333333">Attribute Value</th><th>Which Page Element?</th></tr></thead><tbody><tr><td>data-geo-text<mark style="color:red;">*</mark></td><td>propertyName</td><td>Any Element (See Below)</td></tr><tr><td>data-geo-opacity</td><td>N/A</td><td>Any element with the <strong>Geo Text</strong> data attribute.</td></tr></tbody></table>

The property name is case-sensitive and must match the 'Property Variable' for that visitor data property in the [Visitor Data Properties table](https://developers.getgeoflow.com/geoflow-docs/overview/visitor-data-properties).

While the Geo Text data attribute can technically be added to virtually any HTML element, you may experience an unintended or adverse result with certain elements.

No value is needed for the Geo Opacity data attribute; any value added will have no effect.

<mark style="color:red;">\*</mark>‎‏‏‎ ‎Attribute names with a red asterisk are required; all others listed in the table are optional.

### Examples

<table data-card-size="large" data-view="cards"><thead><tr><th>Attribute Value</th><th>Description</th><th data-hidden>Attribute Name</th></tr></thead><tbody><tr><td><mark style="color:yellow;"><code>countryName</code></mark></td><td>The element's text content will be changed to the visitor's country name (e.g. Canada).</td><td>data-geo-visibility</td></tr><tr><td><mark style="color:yellow;"><code>city</code></mark></td><td>The element's text content will be changed to the visitor's city (e.g. Melbourne).</td><td>data-geo-visibility</td></tr><tr><td><mark style="color:yellow;"><code>deviceType</code></mark></td><td>The element's text content will be changed to the visitor's device type (e.g. Mobile).</td><td>data-geo-visibility</td></tr><tr><td><mark style="color:yellow;"><code>OS</code></mark></td><td>The element's text content will be changed to the visitor's OS (e.g. Windows).</td><td></td></tr></tbody></table>