Skip to content
No description or website provided.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

VTEX Telemarketing


The VTEX Telemarketing app is a store component that enables a call center operator impersonate a costumer in the store, and this app is used by store theme.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Release schedule

Release Status Initial Release Maintenance LTS Start End-of-life Store Compatibility
[2.x] Current Release 2018-11-08 2.x
[1.x] Maintenance LTS 2018-08-15 2018-11-08 March 2019 1.x

See our LTS policy for more information.

Table of Contents


This app uses our store builder with the blocks architecture. To know more about the Store Builder click here.

We add the telemarketing as a block in our Store Header.

To configure or customize this app, you need to import it in your dependencies in manifest.json.

  dependencies: {
    "vtex.telemarketing": "2.x"

Then, add telemarketing block into your app theme as we do in our Store theme app.

📢 Disclaimer: This component will only be displayed for the users that have the role of 2 - Televendas (Call center operator) in their access profile.

To give an user the permission of call center operator you need to follow these steps on VTEX admin management page:

  • Access the page: Account Management -> Access Profiles -> Click in New Profile -> Select 2 - Televendas (Call center operator)
  • Add the email of the users that are responsable for impersonating customers(call center operators).

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within telemarketing and describes if they are required or optional.

  "telemarketing": {
    "component": "index"

As you can see, this app has no required or optional block.


This app has no configuration yet.

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:
  "builders": {
    "styles": "1.x"
  1. Create a file called vtex.telemarketing.css inside the styles/css folder. Add your custom styles:
.container {
  margin-top: 10px;

CSS namespaces

Below, we describe the namespaces that are defined in the telemarketing.

Class name Description Component Source
container The main container of telemarketing index
popoverArrowUp Popover arrow up Popover
popoverBox Popover box Popover
popoverContentContainer Popover content container Popover
popoverContainer Main container of the popover Popover
login Login container LoginAsCustomer
loginForm Login form container LoginAsCustomer
loginFormMessage Login form message container LoginAsCustomer
emailInput Container of the email input LoginAsCustomer
clientName Client name container LogoutCustomerSession
clientNameBar Client name container that appear in the bar LogoutCustomerSession
logout Container of the logout LogoutCustomerSession
logoutForm Container of the logout form LogoutCustomerSession
popoverHeaderIcon Container of the icon that appear in the popover header LoginAsCustomer, LogoutCustomerSession
popoverHeaderEmail Container of the email that appear in the popover header LoginAsCustomer, LogoutCustomerSession


You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.


Check it out how to contribute with this project.


To execute our tests go to react/ folder and run yarn test

Travis CI

Build Status Coverage Status

You can’t perform that action at this time.