{"section":"tutorials","requestedLocale":"en","requestedSlug":"customizar-a-toolbar-de-televendas","locale":"en","slug":"customizar-a-toolbar-de-televendas","path":"docs/en/tutorials/storefront/layout/customizar-a-toolbar-de-televendas.md","branch":"main","content":"> ⚠️ It is not recommended changing the height of the toolbar element. If your store has a fixed header on top of the screen, it should receive the `top` css property with the necessary height not to overlap with the callcenter toolbar.\n\nThe new callcenter toolbar can be customized with the styles of your store or using JavaScript. To overwrite the original styles of the toolbar, do the customization in a **.css** or **.js** file and load it into the page template.\n\nTo customize the toolbar styles, use the following classes:\n\n```\n.cc-toolbar //Most external element of the toolbar\n.cc-user //Section with user email (operator)  \n.cc-customer //Section with the personified customer's email\n.cc-btn-login //Login button to personify customer\n.cc-impersonate //Pop-up with input form for customer email\n.cc-btn-change //Login button to change personified customer\n```\n\nTo interact with the bar via JavaScript, use the following IDs as hooks to access its different elements in the DOM:\n\n```\n#vtex-callcenter //Most external element of the toolbar\n#vtex-callcenter__user-email //Element with the user's email (operator)  \n#vtex-callcenter__customer-email //Customer's email element\n#vtex-callcenter__customer-email-input //Customer email input element\n#vtex-callcenter__customer-login-submit //Customer email submit element\n``` \n\nYou can also interact with the toolbar using its public Javascript methods:\n\n```\n// Impersonate customer login\nwindow.cc.impersonate(customer_email)\n```\n\n(Where `customer_email` is a string with the client's email address)\n\n\n```\n// Impersonate customer logout\nwindow.cc.customerLogout()\n```\n(Returns `true` if you logout, returns `false` if there was no impersonated customer)"}