{"id":53911,"date":"2021-05-28T07:16:54","date_gmt":"2021-05-28T07:16:54","guid":{"rendered":"https:\/\/www.sogolytics.com\/help\/?page_id=53911"},"modified":"2023-08-11T09:48:52","modified_gmt":"2023-08-11T09:48:52","slug":"how-to-set-up-tab-editor-in-sogoconnect","status":"publish","type":"page","link":"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/","title":{"rendered":"Tab Editor"},"content":{"rendered":"<p>The SogoConnect Tab is easy to implement and gives your Customers easy access throughout your website. This Tab sits either on the side or bottom of your webpage and pops out when clicked, allowing the Customer to fill out a simple SogoConnect form and you to quickly gather feedback. By just copying and pasting a block of code once, the Tab can be easily implemented on all pages of your website.<\/p>\n<ul>\n<li>Example Use Case\n<ul>\n<li>You&#8217;ve rolled out SogoConnect on your main company website, but you&#8217;d also like to collect feedback from each of your 25 different business locations. Because the &#8220;local&#8221; pages are all hosted from your main site, embedding the SogoConnect Tab embed code in your website&#8217;s header code allows you to hear from customers on any page at any time. Smart, right?<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Customizing Tab Design<\/h2>\n<p><strong>Desktop Website Tabs<\/strong> \u2013 For tabs that appear to your visitors when viewing your organization website from a computer.<\/p>\n<p>Under Settings, click on Tab Editor (listed under Form Setup).<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"\/help\/wp-content\/uploads\/2023\/05\/SC19.0.png\" \/><\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>Click the green Edit button found in the top right-hand corner of the page.<\/li>\n<li>Under Details, choose the Tab you would like to edit from the dropdown.<\/li>\n<li>Under Tab Properties, customize the width and the message to be displayed along the Tab (Title) before it is expanded.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"\/help\/wp-content\/uploads\/2023\/05\/SC19.1.png\" \/><\/p>\n<ol>\n<li>Review the menu of color options under Tab Style and make your choice.<\/li>\n<li>From the Tab Style menu, select your preferred Tab placement by using the Placement dropdown.<\/li>\n<li>Choose your preferred Tab Icon by selecting a logo or clicking none.<\/li>\n<li>Under Tab Form Settings, add the message you would like Customers to see at the top of the opened Tab. This message appears above the Interest Area dropdown menu.<\/li>\n<li>Click on \u2018Set up order\u2019 under Tab Form Settings to choose and organize the Interest Areas to appear in this Tab.<\/li>\n<li>Remember to hit save at the top right-hand corner to save your changes!<\/li>\n<\/ol>\n<p><strong>Mobile Website Tabs<\/strong> \u2013 For tabs that appear to your visitors when viewing your organization website from a phone.<\/p>\n<p>Under Settings, click on Tab Editor (listed under Form Setup).<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>Select the tab that you want to edit from the drop-down.<\/li>\n<li>Click on Mobile View to expand the editor.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"\/help\/wp-content\/uploads\/2023\/05\/SC19.2.png\" \/><\/p>\n<ol>\n<li>You\u2019ll see the preview of the mobile floating icon on the left<\/li>\n<li>Choose the color theme of the icon from multiple color selections<\/li>\n<li>Select the tab icon you want to be displayed as the floating icon<\/li>\n<li>Click on \u2018Set up order\u2019 under Tab Form Settings to choose and organize the Interest Areas to appear in this Tab. You can drag &amp; drop the order you wish the Interest Areas or Categories to appear in.<\/li>\n<\/ol>\n<h2>Get the Tab Online<\/h2>\n<p><strong>Find the Code(s)<\/strong><\/p>\n<p>Click on Share in the top right-hand corner of the Tab Editor page.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter\" src=\"\/help\/wp-content\/uploads\/2023\/05\/SC19.3.png\" \/><\/p>\n<ul>\n<li>Email \u2013 Enter the email address of the individual to receive the Tab embed code(s). You may choose an entire Tab, or manually select specific Interest Areas. Be sure to include a message. Technical instructions on how to embed the Tab will be included in the email notification. Click Send.<\/li>\n<li>Embed \u2013 Copy the embed code to your clipboard in order to add it directly to your website.<\/li>\n<li>Download \u2013 Generate and save an Excel file of each of your Tab embed codes.<\/li>\n<\/ul>\n<p><strong>Where to Put Them<\/strong><\/p>\n<p>The Tab can be implemented by copying the embed code in the Download Form Links Excel file and pasting it into either the header or the footer sections of your website. Specifically, the code can be added after the closing &lt;\/html&gt; tag or within the &lt;head&gt; tag. See two placement examples below.<\/p>\n<p><em><strong>Header:<\/strong><\/em><\/p>\n<p>&lt;!DOCTYPE html&gt;<\/p>\n<p>&lt;html&gt;<\/p>\n<p>&lt;body&gt;<\/p>\n<p>&lt;head&gt;<\/p>\n<p>\/\/ PLACE THE TAB EMBED CODE HERE \/\/<\/p>\n<p>&lt;\/head&gt;<\/p>\n<p>&nbsp;<\/p>\n<p><em><strong>Footer:<\/strong><\/em><\/p>\n<p>&lt;\/body&gt;<\/p>\n<p>&lt;\/html&gt;<\/p>\n<p>\/\/ PLACE THE TAB EMBED CODE HERE \/\/<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The SogoConnect Tab is easy to implement and gives your Customers easy access throughout your website. This Tab sits either on the side or bottom of your webpage and pops out when clicked, allowing the Customer to fill out a simple SogoConnect form and you to quickly gather feedback. By just copying and pasting a block of code once, the Tab can be easily implemented on all pages of your website. Example Use Case You&#8217;ve rolled out SogoConnect on your main company website, but you&#8217;d also like to collect feedback from each of your 25 different business locations. Because the &#8220;local&#8221; pages are all hosted from your main site, embedding the SogoConnect Tab embed code in your website&#8217;s header code allows you to hear from customers on any page at any time. Smart, right? Customizing Tab Design Desktop Website Tabs \u2013 For tabs that appear to your visitors when viewing your organization website from a computer. Under Settings, click on Tab Editor (listed under Form Setup). Click the green Edit button found in the top right-hand corner of the page. Under Details, choose the Tab you would like to edit from the dropdown. Under Tab Properties, customize the width and the message to be displayed along the Tab (Title) before it is expanded. Review the menu of color options under Tab Style and make your choice. From the Tab Style menu, select your preferred Tab placement by using the Placement dropdown. Choose your preferred Tab Icon by selecting a logo [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":591,"comment_status":"closed","ping_status":"closed","template":"sogo_new_design.php","meta":{"footnotes":""},"categories":[346],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.7.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tab Editor in SogoConnect | Sogolytics<\/title>\n<meta name=\"description\" content=\"Learn where and how you can design your tab in SogoConnect.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tab Editor in SogoConnect | Sogolytics\" \/>\n<meta property=\"og:description\" content=\"Learn where and how you can design your tab in SogoConnect.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/\" \/>\n<meta property=\"og:site_name\" content=\"Sogolytics\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-11T09:48:52+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/\",\"url\":\"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/\",\"name\":\"Tab Editor in SogoConnect | Sogolytics\",\"isPartOf\":{\"@id\":\"https:\/\/www.sogolytics.com\/help\/#website\"},\"datePublished\":\"2021-05-28T07:16:54+00:00\",\"dateModified\":\"2023-08-11T09:48:52+00:00\",\"description\":\"Learn where and how you can design your tab in SogoConnect.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.sogolytics.com\/help\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tab Editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.sogolytics.com\/help\/#website\",\"url\":\"https:\/\/www.sogolytics.com\/help\/\",\"name\":\"Sogolytics\",\"description\":\"Sogolytics - Online Survey Tool\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.sogolytics.com\/help\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tab Editor in SogoConnect | Sogolytics","description":"Learn where and how you can design your tab in SogoConnect.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/","og_locale":"en_US","og_type":"article","og_title":"Tab Editor in SogoConnect | Sogolytics","og_description":"Learn where and how you can design your tab in SogoConnect.","og_url":"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/","og_site_name":"Sogolytics","article_modified_time":"2023-08-11T09:48:52+00:00","twitter_card":"summary","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/","url":"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/","name":"Tab Editor in SogoConnect | Sogolytics","isPartOf":{"@id":"https:\/\/www.sogolytics.com\/help\/#website"},"datePublished":"2021-05-28T07:16:54+00:00","dateModified":"2023-08-11T09:48:52+00:00","description":"Learn where and how you can design your tab in SogoConnect.","breadcrumb":{"@id":"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.sogolytics.com\/help\/how-to-set-up-tab-editor-in-sogoconnect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sogolytics.com\/help\/"},{"@type":"ListItem","position":2,"name":"Tab Editor"}]},{"@type":"WebSite","@id":"https:\/\/www.sogolytics.com\/help\/#website","url":"https:\/\/www.sogolytics.com\/help\/","name":"Sogolytics","description":"Sogolytics - Online Survey Tool","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sogolytics.com\/help\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"seo_meta_info":{"yoast_noindex":"","rankmath_noindex":"","yoast_title":"Tab Editor in SogoConnect | Sogolytics","yoast_desc":"Learn where and how you can design your tab in SogoConnect.","rankmath_title":"Tab Editor","rankmath_desc":"The SogoConnect Tab is easy to implement and gives your Customers easy access throughout your website. This Tab sits either on the side or bottom&hellip;"},"_links":{"self":[{"href":"https:\/\/www.sogolytics.com\/help\/wp-json\/wp\/v2\/pages\/53911"}],"collection":[{"href":"https:\/\/www.sogolytics.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.sogolytics.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.sogolytics.com\/help\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sogolytics.com\/help\/wp-json\/wp\/v2\/comments?post=53911"}],"version-history":[{"count":7,"href":"https:\/\/www.sogolytics.com\/help\/wp-json\/wp\/v2\/pages\/53911\/revisions"}],"predecessor-version":[{"id":62307,"href":"https:\/\/www.sogolytics.com\/help\/wp-json\/wp\/v2\/pages\/53911\/revisions\/62307"}],"wp:attachment":[{"href":"https:\/\/www.sogolytics.com\/help\/wp-json\/wp\/v2\/media?parent=53911"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sogolytics.com\/help\/wp-json\/wp\/v2\/categories?post=53911"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sogolytics.com\/help\/wp-json\/wp\/v2\/tags?post=53911"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}