{"id":47172,"date":"2020-05-11T06:24:29","date_gmt":"2020-05-11T06:24:29","guid":{"rendered":"https:\/\/www.tawk.to\/?page_id=47172"},"modified":"2025-09-22T01:00:36","modified_gmt":"2025-09-22T01:00:36","slug":"widget-design","status":"publish","type":"page","link":"https:\/\/www.tawk.to\/academy\/widget-design\/","title":{"rendered":"Widget Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"47172\" class=\"elementor elementor-47172\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-d17127d elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"d17127d\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a47dda1\" data-id=\"a47dda1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-dff23da elementor-widget elementor-widget-heading\" data-id=\"dff23da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">101 - Business Messaging Masterclass<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e98d091 elementor-widget elementor-widget-heading\" data-id=\"e98d091\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h4 class=\"elementor-heading-title elementor-size-default\">2. Widget Design<\/h4>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-c2ac440 elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"c2ac440\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;,&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-bda6d00 elementor-hidden-phone\" data-id=\"bda6d00\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-bdcac60 elementor-widget elementor-widget-spacer\" data-id=\"bdcac60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5d7173 elementor-position-inline-start elementor-view-default elementor-mobile-position-block-start elementor-widget elementor-widget-icon-box\" data-id=\"b5d7173\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"icon-box.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-box-wrapper\">\n\n\t\t\t\t\t\t<div class=\"elementor-icon-box-icon\">\n\t\t\t\t<span  class=\"elementor-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-list\"><\/i>\t\t\t\t<\/span>\n\t\t\t<\/div>\n\t\t\t\n\t\t\t\t\t\t<div class=\"elementor-icon-box-content\">\n\n\t\t\t\t\t\t\t\t\t<h6 class=\"elementor-icon-box-title\">\n\t\t\t\t\t\t<span  >\n\t\t\t\t\t\t\tContents\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/h6>\n\t\t\t\t\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-167ac24 elementor-nav-menu__align-start elementor-nav-menu--stretch elementor-nav-menu__text-align-center elementor-hidden-phone elementor-nav-menu--dropdown-tablet elementor-nav-menu--toggle elementor-nav-menu--burger ha-has-bg-overlay elementor-widget elementor-widget-nav-menu\" data-id=\"167ac24\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;full_width&quot;:&quot;stretch&quot;,&quot;layout&quot;:&quot;vertical&quot;,&quot;submenu_icon&quot;:{&quot;value&quot;:&quot;&lt;i class=\\&quot;fas fa-caret-down\\&quot; aria-hidden=\\&quot;true\\&quot;&gt;&lt;\\\/i&gt;&quot;,&quot;library&quot;:&quot;fa-solid&quot;},&quot;toggle&quot;:&quot;burger&quot;}\" data-widget_type=\"nav-menu.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t<nav aria-label=\"Menu\" class=\"elementor-nav-menu--main elementor-nav-menu__container elementor-nav-menu--layout-vertical e--pointer-background e--animation-fade\">\n\t\t\t\t<ul id=\"menu-1-167ac24\" class=\"elementor-nav-menu sm-vertical\"><li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48182\"><a href=\"https:\/\/www.tawk.to\/academy\/business-messaging\/\" class=\"elementor-item\"><p> 1. Introduction<br><span class=\"video-mins\"> 30s <\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48183\"><a href=\"https:\/\/www.tawk.to\/academy\/widget-design\/\" class=\"elementor-item\"><p> 2. Widget design<br><span class=\"video-mins\"> 3min <\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48184\"><a href=\"https:\/\/www.tawk.to\/academy\/online-offline\/\" class=\"elementor-item\"><p> 3. Online, offline <br><span class=\"video-mins\"> 4min <\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48185\"><a href=\"https:\/\/www.tawk.to\/academy\/pre-chat-form\/\" class=\"elementor-item\"><p> 4. Pre-Chat Form<br><span class=\"video-mins\"> 3min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48186\"><a href=\"https:\/\/www.tawk.to\/academy\/triggers\/\" class=\"elementor-item\"><p> 5. Triggers<br><span class=\"video-mins\"> 3min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48187\"><a href=\"https:\/\/www.tawk.to\/academy\/responding-to-chats\/\" class=\"elementor-item\"><p> 6. Responding to chats<br><span class=\"video-mins\"> 2min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48188\"><a href=\"https:\/\/www.tawk.to\/academy\/shortcuts-tabs\/\" class=\"elementor-item\"><p> 7. Shortcuts And Tabs<br><span class=\"video-mins\"> 5min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48189\"><a href=\"https:\/\/www.tawk.to\/academy\/three-tips\/\" class=\"elementor-item\"><p> 8. Three tips<br><span class=\"video-mins\"> 2min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48190\"><a href=\"https:\/\/www.tawk.to\/academy\/collaborating\/\" class=\"elementor-item\"><p> 9. Team collaborating<br><span class=\"video-mins\"> 3min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48343\"><a href=\"https:\/\/www.tawk.to\/academy\/feature\/\" class=\"elementor-item\"><p> 10. Features <br><span class=\"video-mins2\"> 4min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48192\"><a href=\"https:\/\/www.tawk.to\/academy\/conclusion\/\" class=\"elementor-item\"><p> 11. Conclusion <br><span class=\"video-mins2\"> 1min<\/span><\/p><\/a><\/li>\n<\/ul>\t\t\t<\/nav>\n\t\t\t\t\t<div class=\"elementor-menu-toggle\" role=\"button\" tabindex=\"0\" aria-label=\"Menu Toggle\" aria-expanded=\"false\">\n\t\t\t<i aria-hidden=\"true\" role=\"presentation\" class=\"elementor-menu-toggle__icon--open eicon-menu-bar\"><\/i><i aria-hidden=\"true\" role=\"presentation\" class=\"elementor-menu-toggle__icon--close eicon-close\"><\/i>\t\t<\/div>\n\t\t\t\t\t<nav class=\"elementor-nav-menu--dropdown elementor-nav-menu__container\" aria-hidden=\"true\">\n\t\t\t\t<ul id=\"menu-2-167ac24\" class=\"elementor-nav-menu sm-vertical\"><li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48182\"><a href=\"https:\/\/www.tawk.to\/academy\/business-messaging\/\" class=\"elementor-item\" tabindex=\"-1\"><p> 1. Introduction<br><span class=\"video-mins\"> 30s <\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48183\"><a href=\"https:\/\/www.tawk.to\/academy\/widget-design\/\" class=\"elementor-item\" tabindex=\"-1\"><p> 2. Widget design<br><span class=\"video-mins\"> 3min <\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48184\"><a href=\"https:\/\/www.tawk.to\/academy\/online-offline\/\" class=\"elementor-item\" tabindex=\"-1\"><p> 3. Online, offline <br><span class=\"video-mins\"> 4min <\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48185\"><a href=\"https:\/\/www.tawk.to\/academy\/pre-chat-form\/\" class=\"elementor-item\" tabindex=\"-1\"><p> 4. Pre-Chat Form<br><span class=\"video-mins\"> 3min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48186\"><a href=\"https:\/\/www.tawk.to\/academy\/triggers\/\" class=\"elementor-item\" tabindex=\"-1\"><p> 5. Triggers<br><span class=\"video-mins\"> 3min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48187\"><a href=\"https:\/\/www.tawk.to\/academy\/responding-to-chats\/\" class=\"elementor-item\" tabindex=\"-1\"><p> 6. Responding to chats<br><span class=\"video-mins\"> 2min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48188\"><a href=\"https:\/\/www.tawk.to\/academy\/shortcuts-tabs\/\" class=\"elementor-item\" tabindex=\"-1\"><p> 7. Shortcuts And Tabs<br><span class=\"video-mins\"> 5min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48189\"><a href=\"https:\/\/www.tawk.to\/academy\/three-tips\/\" class=\"elementor-item\" tabindex=\"-1\"><p> 8. Three tips<br><span class=\"video-mins\"> 2min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48190\"><a href=\"https:\/\/www.tawk.to\/academy\/collaborating\/\" class=\"elementor-item\" tabindex=\"-1\"><p> 9. Team collaborating<br><span class=\"video-mins\"> 3min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48343\"><a href=\"https:\/\/www.tawk.to\/academy\/feature\/\" class=\"elementor-item\" tabindex=\"-1\"><p> 10. Features <br><span class=\"video-mins2\"> 4min<\/span><\/p><\/a><\/li>\n<li class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-48192\"><a href=\"https:\/\/www.tawk.to\/academy\/conclusion\/\" class=\"elementor-item\" tabindex=\"-1\"><p> 11. Conclusion <br><span class=\"video-mins2\"> 1min<\/span><\/p><\/a><\/li>\n<\/ul>\t\t\t<\/nav>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-66 elementor-top-column elementor-element elementor-element-fd76c31\" data-id=\"fd76c31\" data-element_type=\"column\" data-e-type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-445d222 elementor-widget elementor-widget-video\" data-id=\"445d222\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;youtube_url&quot;:&quot;https:\\\/\\\/youtu.be\\\/9TiLxNWYJcU&quot;,&quot;video_type&quot;:&quot;youtube&quot;,&quot;controls&quot;:&quot;yes&quot;}\" data-widget_type=\"video.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-wrapper elementor-open-inline\">\n\t\t\t<div class=\"elementor-video\"><\/div>\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-5cae969 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5cae969\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-narrow\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-12 elementor-inner-column elementor-element elementor-element-decc91d\" data-id=\"decc91d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-12 elementor-inner-column elementor-element elementor-element-1da1cb9\" data-id=\"1da1cb9\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-12 elementor-inner-column elementor-element elementor-element-1468676\" data-id=\"1468676\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-12 elementor-inner-column elementor-element elementor-element-f9f04fe\" data-id=\"f9f04fe\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-51cef1ac elementor-align-justify elementor-widget elementor-widget-button\" data-id=\"51cef1ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-xs\" href=\"\/academy\/introduction\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-chevron-left\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Previous<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-12 elementor-inner-column elementor-element elementor-element-ca1fe01\" data-id=\"ca1fe01\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-271d647b elementor-align-justify elementor-widget elementor-widget-button\" data-id=\"271d647b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-xs\" href=\"\/academy\/online-offline\/\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<i aria-hidden=\"true\" class=\"fas fa-chevron-right\"><\/i>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Next <\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-12 elementor-inner-column elementor-element elementor-element-ccafed1\" data-id=\"ccafed1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-12 elementor-inner-column elementor-element elementor-element-e44145d\" data-id=\"e44145d\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-12 elementor-inner-column elementor-element elementor-element-3d5b71f\" data-id=\"3d5b71f\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<div class=\"elementor-element elementor-element-b8401cd elementor-hidden-phone elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"b8401cd\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"h-tabs\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1931\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1931\" aria-expanded=\"false\">Description<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1932\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1932\" aria-expanded=\"false\">Links<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1931\" aria-expanded=\"false\">Description<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1931\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1931\" tabindex=\"0\" hidden=\"false\"><h4><strong>Widget design<\/strong><\/h4>\n<p>Hey, everyone. In this video, we are going to cover widget design \u2014 how the widget looks on your website.<\/p>\n<p>You can completely customize the design of your tawk.to widget.<\/p>\n<p>Click on the \u2018Administration\u2019 (Gear) icon in the upper menu of the dashboard. Then click \u2018Chat Widget.\u2019 Under \u2018Widget Appearance,\u2019 click \u2018Advanced.\u2019<\/p>\n<p>From here you can change the following:<\/p>\n<p>\u2013 Where the widget is positioned on your website&nbsp;&nbsp;<br>\n\u2013 The type of widget for desktop and mobile<br>\n\u2013 The size of the widget, both when it\u2019s minimized and maximized<br>\n\u2013 The color of the widget<\/p>\n<p>You can even add an Attention Grabber to your widget. Check it out \u2014 there are so many to choose from. If you prefer, you can upload your own image as the Attention Grabber.<\/p>\n<p>When considering your widget design, I want you to keep in mind these three tips:<\/p>\n<p>1. Always try and place your widget in the bottom right-hand corner of the website. It\u2019s where your visitors are going to look for it.<\/p>\n<p>2. There\u2019s a tendency to make the chat widget the same color as your website or to make it blend really well with the website. This can be a huge mistake because it camouflages the widget and then people don\u2019t actually notice it. Instead, you want your chat widget to stand out.<\/p>\n<p>People report higher feelings of trust and confidence when they see that live chat is available on a website. So you have to make sure that they know it\u2019s there. And this leads to my next point &#8230;<\/p>\n<p>3. Use an Attention Grabber. It\u2019s going to make your chat widget stand out, and as I mentioned, you can even upload your own image if you prefer.<\/p>\n<p>Finally, once you\u2019ve created your design, don\u2019t forget to go back to your website and check it out. See how it looks. Make sure you scroll up and down the page and visit other pages as well to make sure it fits with your website.<\/p>\n<p>For more information or for links to the relevant articles in our Help Center, please check out the resources below. We also have 24&#215;7 live chat available on our website.<\/p>\n<p>Up next, we\u2019re going to talk about \u201cbeing online\u201d for when those chats come in.<\/p>\n<p><span style=\"font-weight: 400;\">Learn More:<\/span><\/p>\n<p><a href=\"https:\/\/help.tawk.to\/article\/changing-the-appearance-of-the-chat-widget\"><span style=\"font-weight: 400;\">Changing the appearance of the chat widget<\/span><\/a><\/p>\n<p><a href=\"https:\/\/help.tawk.to\/article\/enabling-the-attention-grabber\"><span style=\"font-weight: 400;\">Enabling the Attention Grabber<\/span><\/a><\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1932\" aria-expanded=\"false\">Links<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1932\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1932\" tabindex=\"0\" hidden=\"hidden\"><h6 style=\"margin-bottom: 5px;\"><a href=\"\/vl-customize-the-chat-widget\/\" rel=\"noopener\"><strong>Customize The Chat Widget <i class=\"fa fa-external-link-alt\"><\/i><\/strong><\/a><\/h6>\nHere is a video showing you how to customize the visitor widget that appears on your website.\n<br><br>\n<h6 style=\"margin-bottom: 5px;\"><a href=\"\/vl-enabling-the-attention-grabber\/\" rel=\"noopener\"><strong>Enabling the Attention Grabber<\/strong> <i class=\"fa fa-external-link-alt\"><\/i><\/a><\/h6>\nHere is a video showing you how to Customize the Visitor Widget and Attention Grabber.<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5eb1f5 elementor-hidden-desktop elementor-hidden-tablet elementor-tabs-view-horizontal elementor-widget elementor-widget-tabs\" data-id=\"b5eb1f5\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"h-tabs\" data-widget_type=\"tabs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-tabs\">\n\t\t\t<div class=\"elementor-tabs-wrapper\" role=\"tablist\" >\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1901\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1901\" aria-expanded=\"false\">Description<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1902\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1902\" aria-expanded=\"false\">Contents<\/div>\n\t\t\t\t\t\t\t\t\t<div id=\"elementor-tab-title-1903\" class=\"elementor-tab-title elementor-tab-desktop-title\" aria-selected=\"false\" data-tab=\"3\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1903\" aria-expanded=\"false\">Links<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t<div class=\"elementor-tabs-content-wrapper\" role=\"tablist\" aria-orientation=\"vertical\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"true\" data-tab=\"1\" role=\"tab\" tabindex=\"0\" aria-controls=\"elementor-tab-content-1901\" aria-expanded=\"false\">Description<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1901\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"1\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1901\" tabindex=\"0\" hidden=\"false\"><h4><strong>Widget design<\/strong><\/h4><p>Hey, everyone. In this video, we are going to cover widget design \u2014 how the widget looks on your website.<\/p><p>You can completely customize the design of your tawk.to widget.<\/p><p>Click on the \u2018Administration\u2019 (Gear) icon in the upper menu of the dashboard. Then click \u2018Chat Widget.\u2019 Under \u2018Widget Appearance,\u2019 click \u2018Advanced.\u2019\u00a0\u00a0<\/p><p>From here you can change the following:<\/p><p>\u2013 Where the widget is positioned on your website<br \/>\u2013 The type of widget for desktop and mobile<br \/>\u2013 The size of the widget, both when it\u2019s minimized and maximized<br \/>\u2013 The color of the widget<\/p><p>You can even add an Attention Grabber to your widget. Check it out \u2014 there are so many to choose from. If you prefer, you can upload your own image as the Attention Grabber.<\/p><p>When considering your widget design, I want you to keep in mind these three tips:<\/p><p>1. Always try and place your widget in the bottom right-hand corner of the website. It\u2019s where your visitors are going to look for it.<\/p><p>2. There\u2019s a tendency to make the chat widget the same color as your website or to make it blend really well with the website. This can be a huge mistake because it camouflages the widget and then people don\u2019t actually notice it. Instead, you want your chat widget to stand out.<\/p><p>People report higher feelings of trust and confidence when they see that live chat is available on a website. So you have to make sure that they know it\u2019s there. And this leads to my next point &#8230;<\/p><p>3. Use an Attention Grabber. It\u2019s going to make your chat widget stand out, and as I mentioned, you can even upload your own image if you prefer.<\/p><p>Finally, once you\u2019ve created your design, don\u2019t forget to go back to your website and check it out. See how it looks. Make sure you scroll up and down the page and visit other pages as well to make sure it fits with your website.<\/p><p>For more information or for links to the relevant articles in our Help Center, please check out the resources below. We also have 24&#215;7 live chat available on our website.<\/p><p>Up next, we\u2019re going to talk about \u201cbeing online\u201d for when those chats come in.<\/p><p><span style=\"font-weight: 400;\">Learn More:<\/span><\/p><p><a href=\"https:\/\/help.tawk.to\/article\/changing-the-appearance-of-the-chat-widget\"><span style=\"font-weight: 400;\">Changing the appearance of the chat widget<\/span><\/a><\/p><p><a href=\"https:\/\/help.tawk.to\/article\/enabling-the-attention-grabber\"><span style=\"font-weight: 400;\">Enabling the Attention Grabber<\/span><\/a><\/p><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"2\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1902\" aria-expanded=\"false\">Contents<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1902\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"2\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1902\" tabindex=\"0\" hidden=\"hidden\"><div style=\"padding:10px 30px;\">\n<h6><strong>Widget Design<\/strong><\/h6>\n\n<p><a href=\"\/academy\/introduction\/\">Introduction<\/a> <span class=\"sm-txt\">Video: 30s<\/span><\/p>\n<p><a href=\"\/academy\/widget-design\/\">Widget Design<\/a> <span class=\"sm-txt\">Video: 3min<\/p>\n<p><a href=\"\/academy\/online-offline\/\">Online Offline<\/a> <span class=\"sm-txt\">Video: 4min<\/span><\/p>\n<p><a href=\"\/academy\/pre-chat-form\/\">Pre-Chat Form<\/a> <span class=\"sm-txt\">Video: 3min<\/span><\/span><\/p>\n<p><a href=\"\/academy\/triggers\/\">Triggers<\/a> <span class=\"sm-txt\">Video: 3min<\/p>\n<p><a href=\"\/academy\/responding-to-chats\/\">Responding To Chats<\/a> <span class=\"sm-txt\">Video: 2min<\/span><\/p>\n<p><a href=\"\/academy\/shortcuts-tabs\/\">Shortcuts And Tabs<\/a> <span class=\"sm-txt\">Video: 3min<\/span><\/p>\n<p><a href=\"\/academy\/three-tips\/\">Three Tips<\/a> <span class=\"sm-txt\">Video: 2min<\/span><\/p>\n<p><a href=\"\/academy\/collaborating\/\">Team Collaborating<\/a> <span class=\"sm-txt\">Video: 3min<\/span><\/p>\n<p><a href=\"\/academy\/feature\/\">Features<\/a> <span class=\"sm-txt\">Video: 4min<\/span><\/p>\n<p><a href=\"\/academy\/conclusion\/\">Conclusion<\/a> <span class=\"sm-txt\">Video: 1min<\/span><\/p>\n<\/div><\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-tab-title elementor-tab-mobile-title\" aria-selected=\"false\" data-tab=\"3\" role=\"tab\" tabindex=\"-1\" aria-controls=\"elementor-tab-content-1903\" aria-expanded=\"false\">Links<\/div>\n\t\t\t\t\t<div id=\"elementor-tab-content-1903\" class=\"elementor-tab-content elementor-clearfix\" data-tab=\"3\" role=\"tabpanel\" aria-labelledby=\"elementor-tab-title-1903\" tabindex=\"0\" hidden=\"hidden\"><h6 style=\"margin-bottom: 5px;\"><a href=\"\/vl-customize-the-chat-widget\/\" rel=\"noopener\"><strong>Customize The Chat Widget <i class=\"fa fa-external-link-alt\"><\/i><\/strong><\/a><\/h6>\nHere is a video showing you how to customize the visitor widget that appears on your website.\n<br><br>\n<h6 style=\"margin-bottom: 5px;\"><a href=\"\/vl-enabling-the-attention-grabber\/\" rel=\"noopener\"><strong>Enabling the Attention Grabber<\/strong> <i class=\"fa fa-external-link-alt\"><\/i><\/a><\/h6>\nHere is a video showing you how to Customize the Visitor Widget and Attention Grabber.<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>101 &#8211; Business Messaging Masterclass 2. Widget Design Contents Previous Next Description Links Description Widget design Hey, everyone. In this video, we are going to cover widget design \u2014 how the widget looks on your website. You can completely customize the design of your tawk.to widget. Click on the \u2018Administration\u2019 (Gear) icon in the upper [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":48491,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-47172","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.tawk.to\/wp-json\/wp\/v2\/pages\/47172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tawk.to\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tawk.to\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tawk.to\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tawk.to\/wp-json\/wp\/v2\/comments?post=47172"}],"version-history":[{"count":111,"href":"https:\/\/www.tawk.to\/wp-json\/wp\/v2\/pages\/47172\/revisions"}],"predecessor-version":[{"id":134875,"href":"https:\/\/www.tawk.to\/wp-json\/wp\/v2\/pages\/47172\/revisions\/134875"}],"up":[{"embeddable":true,"href":"https:\/\/www.tawk.to\/wp-json\/wp\/v2\/pages\/48491"}],"wp:attachment":[{"href":"https:\/\/www.tawk.to\/wp-json\/wp\/v2\/media?parent=47172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}