# Widgets

### Adding Widgets to the Template

To add widgets to your template, simply drag and drop them from the left side menu into the Designer.

<figure><img src="https://171427267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM9BbYBbDPiJapb75xJ2k%2Fuploads%2FJ0M8HFwjraVey99sL1uW%2Fimage.png?alt=media&#x26;token=a0107c85-e33b-48b7-b501-653bc3497428" alt=""><figcaption><p>Dragging the widget onto designer space</p></figcaption></figure>

### Heading

{% hint style="info" %}
Maximum heading length is 255 chars.
{% endhint %}

When the “Heading” widget is dragged into the designer, a window called “Heading settings” will appear. Here, you can input the header data in the “Default” input field.&#x20;

<figure><img src="https://171427267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM9BbYBbDPiJapb75xJ2k%2Fuploads%2Foi9CIyo4f2pfAtPRzCLq%2Fimage.png?alt=media&#x26;token=f54f765f-f504-4a20-bbcf-2c63fab5c2b4" alt=""><figcaption><p>Heading setting window</p></figcaption></figure>

There is also an option to “Enable translations” for translating the heading into languages. This can be done by clicking on the slider labeled “Enable translation”. When clicked, new input fields named “Translation” will appear, with a flag on the left side to indicate the language.

<figure><img src="https://171427267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM9BbYBbDPiJapb75xJ2k%2Fuploads%2FwJ55yBXvXooFj8MyOoF1%2Fimage.png?alt=media&#x26;token=fe8d6d3d-7562-4f4e-8213-a8607466d455" alt=""><figcaption><p>Heading setting window with translation enabled</p></figcaption></figure>

When you have finished setting up the heading, click “Save changes” to confirm. If you wish to discard the changes, click on the “x” icon on the top right part of the window.

### Divider

The “Divider” is a simple line that you can drag and drop from the left side menu onto the designer. The line will be as long as the divider block in the designer.

<figure><img src="https://171427267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM9BbYBbDPiJapb75xJ2k%2Fuploads%2Fca6YUlJps1cIEoqhryUU%2Fimage.png?alt=media&#x26;token=d75e74cf-aa65-47fc-9134-4481a36ad8ab" alt=""><figcaption><p>Divider widget in the designer space</p></figcaption></figure>

### Note

{% hint style="info" %}
Maximum note length is 100k chars.
{% endhint %}

{% hint style="warning" %}
Notes are visible to all users who have privileges to the Product Catalog.
{% endhint %}

{% hint style="success" %}
Notes can be exported / imported with the Ergonode Transfer feature.
{% endhint %}

When the “Note” widget is dragged into the designer, a new window will appear where you can create, edit, or delete a note.&#x20;

<figure><img src="https://171427267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM9BbYBbDPiJapb75xJ2k%2Fuploads%2FpBWvGru8KKsRBQXEvd0d%2Fimage.png?alt=media&#x26;token=b0539a8a-aa92-45f3-9658-7864631539cd" alt=""><figcaption><p>Note widget settings window</p></figcaption></figure>

Notes are RTE-enabled.

<figure><img src="https://171427267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM9BbYBbDPiJapb75xJ2k%2Fuploads%2Fj443pnoyV5inQzav9BqD%2Fimage.png?alt=media&#x26;token=fc647ac7-3a6e-4b65-8c4a-51a365595ef7" alt=""><figcaption><p>Note widget RTE</p></figcaption></figure>

<figure><img src="https://171427267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM9BbYBbDPiJapb75xJ2k%2Fuploads%2FDt59HqxhS8Ti2fQ3nXVk%2Fimage.png?alt=media&#x26;token=468cf014-9567-4ca3-96f4-a2e361749be7" alt=""><figcaption><p>Note widget RTE 2</p></figcaption></figure>

You can also enable translation for the note by clicking on the "Enable translation" switch.

<figure><img src="https://171427267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM9BbYBbDPiJapb75xJ2k%2Fuploads%2FFsNvA4PooRPGGsdQ7Z29%2Fimage.png?alt=media&#x26;token=c5ddda3c-6ca7-48e2-9909-de2ee74eca9a" alt=""><figcaption><p>Note widged setting window with translation enabled</p></figcaption></figure>

Remember to save your changes so your work is not lost. You can do it by clicking the "Save settings" button.

In the Product Catalog, the note can be accessed by clicking on the ![](https://171427267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM9BbYBbDPiJapb75xJ2k%2Fuploads%2FpYoAhN1mHj2VvLjb6fyo%2Fimage.png?alt=media\&token=2d9b4e83-05fe-4d57-b780-39f31916a796) button (Products > Catalog > \[choose the product] > Template). Doing so will open a right side panel with the note itself.

<figure><img src="https://171427267-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM9BbYBbDPiJapb75xJ2k%2Fuploads%2FUHFudX4IQQ10HNCZitG4%2Fimage.png?alt=media&#x26;token=094d5581-ab04-4b7a-9220-8d7d3490feef" alt=""><figcaption><p>Note widget presentation on the product card</p></figcaption></figure>
