---
title: "Create a Smart Sticky Bar - EngageBox"
description: "A super easy tutorial which helps you to create and a Smart Sticky Bar sticked on top or on bottom position of your website. Steps  Go to Component"
url: "https://www.tassos.gr/docs/engagebox/popups/create-a-smart-sticky-bar"
date: "2026-04-03T02:02:47+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ EngageBox ](https://www.tassos.gr/index.php?option=com_content&view=category&id=35) / [ Popup Types ](https://www.tassos.gr/index.php?option=com_content&view=category&id=69)

#  Create a Smart Sticky Bar

A super easy tutorial which helps you to create and a Smart Sticky Bar sticked on top or on bottom position of your website.

## [Steps](#steps)

- Go to Components -> EngageBox
- Create a new Box by clicking on the "New" button from the top bar
- On General Tab
    - Set the *Box Type* to *Freetext*
    - Write your own custom message on the *Freetext* field
    - Set a Box title
- On Trigger Tab
    - Set the *Position* to *Top Left* to stick on Top or *Bottom Left* to stick on Bottom.
    - Set the *Trigger Point* to *on Page Ready* or *on Page Load*
    - Set the *Transision in Effect* to *slideDownIn*
    - Set the *Transision out Effect* to *slideDownOut*
- On Appearance Tab
    - Set the *Width* to 100%
    - Set the *Height* to auto
    - Set the preferred colors
- Set the preferred Publishing Assignments
- Publish the Box
- Enjoy your Smart Sticky Bar!

## [Notes](#notes)

For advanced styling use the Custom CSS field under the Appearance tab.

 Last updated on Nov 26th 2024 12:11

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "EngageBox",
            "item": "https://www.tassos.gr/docs/engagebox"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Popup Types",
            "item": "https://www.tassos.gr/docs/engagebox/popups"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Create a Smart Sticky Bar",
            "item": "https://www.tassos.gr/docs/engagebox/popups/create-a-smart-sticky-bar"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/engagebox/popups/create-a-smart-sticky-bar"
    },
    "headline": "Create a Smart Sticky Bar",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Tassos Marinos",
        "url": "https://www.tassos.gr/docs/engagebox/popups/create-a-smart-sticky-bar"
    },
    "datePublished": "2015-07-04T09:46:11+03:00",
    "dateCreated": "2015-10-15T10:07:50+03:00",
    "dateModified": "2024-11-26T12:28:13+02:00"
}
```