---
title: BoxPopup component (Deprecated)
slug: '1240'
canonical_url: https://docs.coveo.com/en/1240/
collection: coveo-for-salesforce
source_format: adoc
---
# BoxPopup component (Deprecated)
> **Deprecated**
>
> This feature is still available, but no longer supported as of the August 2023 release of Coveo for Salesforce version [5.2](https://docs.coveo.com/en/n5bj0150#august-2023-release-v5-2-initial-release).

Since the [`Box` component](https://docs.coveo.com/en/1282/) is designed to be included in the Salesforce console sidebar with a limited amount of space, it might be useful to add sections that can be hidden or shown when the user clicks them.

This component is only a container inside of which you can drop any other content or components.

## Options

### title

Specifies the static title that should be displayed.

The default value is `Click here to open`.

> **Important**
>
> Since this component exposes methods to set its title, it's possible that other components contained inside this container dynamically set it.

```xml
<div data-title='<YOUR_STATIC_TITLE>'></div>
```

Where you can replace `<YOUR_STATIC_TITLE>` by the static title that should be displayed.

### withAnimation

Specifies if the popup should open with an animation.

The animation is completely CSS based.
To modify the animation itself, modify the CSS rules that apply to the relevant elements.

The default value is `true`.

```xml
<div data-with-animation='true'></div>
```

### fullWidth

Specifies if the popup should open with the fully available width of the page.

The default value is `false`.

```xml
<div data-full-width='false'></div>
```

### fullHeight

Specifies if the popup should open with the fully available height of the page.

The default value is `false`.

```xml
<div data-full-height='false'></div>
```

## Methods

### setTitle

Sets the title displayed in the popup container.

```javascript
$('.CoveoBoxPopup').coveo('setTitle', '<TITLE>');
```

Where you replace `<TITLE>` by the title to be displayed in the popup container.

### open

Opens the popup.

```javascript
$('.CoveoBoxPopup').coveo('open')
```

### close

Closes the popup.

```javascript
$('.CoveoBoxPopup').coveo('close')
```

### toggle

Opens or close the popup depending on its current state.

```javascript
$('.CoveoBoxPopup').coveo('toggle')
```

## Usage

The HTML content inside the `BoxPopup div` will be used to determine what's shown or hidden when the panel is opened and closed.

```xml
<div class='CoveoBoxPopup'>
    <div class='coveo-facet-column'>
        <div class='CoveoFacet' data-field='@<FACET1>'></div>
        <div class='CoveoFacet' data-field='@<FACET2>'></div>
        <div class='CoveoFacet' data-field='@<FACET3>'></div>
    </div>
</div>
```

Where you replace `<FACET1>`, `<FACET2>`, and `<FACET3>` by respectively the name of the first, second, and third facet you want to show.
You can add as many facets as you want.