--- title: "Wallboard Components and their Configuration" slug: "wallboard-components-and-their-configuration" tags: ["Wallboards", "Custom Sort Order", "Wallboard Components"] updated: 2026-11-06T16:53:46Z published: 2026-11-06T16:53:46Z canonical: "docs.natterbox.com/wallboard-components-and-their-configuration" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.natterbox.com/llms.txt > Use this file to discover all available pages before exploring further. # Wallboard Components and their Configuration ### How to add a component Select **+ Add Component** or **Add Component** ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/how-to-add-a-component-image-7np47s9i.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) You will then see a screen with three component categories on the left side of the screen, each of which is then broken down into a number of specific components: ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/how-to-add-a-component-image-i2sluu9m.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) Choose to get started to with a Queues, Calls or Users component, see below. ### How to edit components The configuration of any new or pre-existing component can be edited, just click on the editing pencil icon to display the configuration options : ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/how-to-edit-components-image-dkm7vvw2.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) Remember to click **Save** to apply your alterations.

Moving/resizing components

 Components can be dragged around by hovering over the grey bar of the component and clicking and dragging the box to the desired location. Note the components will always snap to the top of the page so they will also be visible when running the Wallboard. To resize a component, click and drag on one of the three arrows : ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/how-to-edit-components-image-h53szs19.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) ### Cloning Components Components can be cloned by simply clicking on the copy icon on the grey bar: ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/how-to-edit-components-image-kkbc471u.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) This will produce another component with the same configurations as the original. ### Deleting Components Components can be deleted, simply click on the delete X button: ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/how-to-edit-components-image-2h4p00fu.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) You will always be prompted to confirm your action when attempting to delete a component. ### Custom Sort Order for Availability and Presence Sort your Agent list by choosing a sort order of Availability States or Presence States that suit your requirements. #### How to configure custom sort order 1. Edit the Agent List component on your Wallboard, you will now see two additional options, Availability State (Custom) and Presence State (Custom) ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/image-1689151707606.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) 2. Select either Availability or Presence depending on your requirements (The processes for changing the order of either Availability State or Presence State is exactly the same) ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/image-1689151848042.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) 3. With Availability State (Custom) now selected you will see two lines next to each Availability state, click and drag on the two lines to change your availability state ordering ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/image-1689151968729.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) 4. If there are any states that you would not like displayed simply use the checkbox to unselect them - unelected states are automatically moved to the bottom of the list ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/image-1689152144840.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) 5. Click save and your sort order will be saved. #### Things to Note 1. You cannot drag a selected state down to the unselected states ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/image-1689155621155.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) 2. You cannot move an unselected state ![](https://cdn.document360.io/c81c490c-daaa-4ebd-a3c3-1a2dee8b7617/Images/Documentation/image-1689155691331.png?sv=2026-02-06&spr=https&st=2026-11-13T01%3A43%3A21Z&se=2026-11-13T02%3A43%3A21Z&sr=c&sp=r&sig=F3VV5N%2BiJZfmCP9OL15wGDzH5BfCh7bfZ9EDZw11Edo%3D) ## Related - [Queue Components](/queue-components.md) - [User Components](/user-components.md) - [Call Components](/call-components.md)