{"section":"tutorials","requestedLocale":"es","requestedSlug":"customizar-a-toolbar-de-televendas","locale":"es","slug":"customizar-a-toolbar-de-televendas","path":"docs/es/tutorials/storefront/layout/customizar-a-toolbar-de-televendas.md","branch":"main","content":"> ⚠️ No se recomienda cambiar la altura del elemento HTML de la toolbar. Se tu tienda tiene un header fijo en la parte superior de la pantalla, hay que utilizar la propiedade css `top` con la altura necesaria para evitar sobreposición entre el header y la barra\n\n\nLa nueva toolbar de televentas puede ser personalizada con los estilos de su tienda o con javascript. Para anular los estilos originales de la toolbar, es necesario hacer la personalización en un archivo **.css** o **.js** y cargarlo en en template de la página.\n\nPara personalizar los estilos de la toolbar, use las clases abajo:\n\n\n```\n.cc-toolbar //Elemento más exterior de la toolbar\n.cc-user //Sección con el e-mail del usuario (operador)\n.cc-customer //Sección con el e-mail del cliente personificado\n.cc-btn-login //Botón de login para personificar cliente\n.cc-impersonate //Pop-up con formulario para input del e-mail del cliente\n.cc-btn-change //Botón de login para cambiar de cliente personificado\n```\n\nPara interactuar con la barra a través de javascript, utilize los IDs abajo como hooks para acceder a sus diferentes elementos en el DOM:\n\n```\n#vtex-callcenter //Elemento más exterior de la toolbar\n#vtex-callcenter__user-email //Elemento del e-mail del usuario (operador)\n#vtex-callcenter__customer-email //Elemento del e-mail del cliente\n#vtex-callcenter__customer-email-input //Elemento de input del e-mail del cliente\n#vtex-callcenter__customer-login-submit //Elemento de submit del input del e-mail del cliente\n``` \n\nTambién puedes interactua con la barra utilizando elementos públicos de Javascript:\n\n```\n// Login de personificación de cliente\nwindow.cc.impersonate(customer_email)\n```\n\n(Donde `customer_email` é una string con el email del cliente)\n\n\n```\n// Logout de personificación de cliente\nwindow.cc.customerLogout()\n```\n(Retorna `true` si haces logout, retorna `false` si no havia cliente personificado)"}