Tab Editor
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’ve rolled out SogoConnect on your main company website, but you’d also like to collect feedback from each of your 25 different business locations. Because the “local” pages are all hosted from your main site, embedding the SogoConnect Tab embed code in your website’s header code allows you to hear from customers on any page at any time. Smart, right?
Customizing Tab Design
Desktop Website Tabs – 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 or clicking none.
- 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.
- Click on ‘Set up order’ under Tab Form Settings to choose and organize the Interest Areas to appear in this Tab.
- Remember to hit save at the top right-hand corner to save your changes!
Mobile Website Tabs – For tabs that appear to your visitors when viewing your organization website from a phone.
Under Settings, click on Tab Editor (listed under Form Setup).
- Select the tab that you want to edit from the drop-down.
- Click on Mobile View to expand the editor.
- You’ll see the preview of the mobile floating icon on the left
- Choose the color theme of the icon from multiple color selections
- Select the tab icon you want to be displayed as the floating icon
- Click on ‘Set up order’ under Tab Form Settings to choose and organize the Interest Areas to appear in this Tab. You can drag & drop the order you wish the Interest Areas or Categories to appear in.
Get the Tab Online
Find the Code(s)
Click on Share in the top right-hand corner of the Tab Editor page.
- Email – 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.
- Embed – Copy the embed code to your clipboard in order to add it directly to your website.
- Download – Generate and save an Excel file of each of your Tab embed codes.
Where to Put Them
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 </html> tag or within the <head> tag. See two placement examples below.
Header:
<!DOCTYPE html>
<html>
<body>
<head>
// PLACE THE TAB EMBED CODE HERE //
</head>
Footer:
</body>
</html>
// PLACE THE TAB EMBED CODE HERE //
