Showit gives you pixel-perfect design control, but great websites need more than beautiful layouts. They need functional elements that capture leads, showcase your work, and convert visitors into customers.
That combination of creative freedom and advanced functionality is exactly why many business owners invest in Showit website development instead of more restrictive platforms.
This guide walks you through adding essential functionality to your Showit website, from contact forms and Google Maps to Instagram feeds, videos, popups, and countdown timers. Whether you’re building from scratch or enhancing an existing site, these integrations will transform your design into a conversion powerhouse.
Adding Contact Forms to Your Showit Website
Contact forms are the backbone of lead generation. Showit offers built-in contact form capabilities plus seamless integration with third-party email marketing platforms.
If your goal is to turn visitors into inquiries consistently, your form setup should align with broader conversion and SEO strategies like those used in high-converting homepage design.
Using Showit’s Built-In Contact Form
Showit templates come with pre-configured contact forms that you can customize to match your brand. These forms use canvas views to create a two-state experience: the form itself and a thank-you message after submission.
Create a new blank canvas or locate your existing contact form canvas. Add text boxes for each field you want to collect, such as name, email, phone number, and message. Label each field clearly so visitors understand what information to provide.
If you’re working from a template, this process pairs well with editing and customizing a Showit template correctly so your forms feel cohesive with the rest of your design.
Select each text box and navigate to the Text Properties panel on the right. Toggle “Enable Input” to tell Showit to collect the information entered in that field. Mark fields as “Required” if visitors must complete them before submitting.
For the email field, enable “Reply To” so when you receive form submissions, clicking reply automatically addresses your response to the visitor’s email address. This small detail saves time and improves your response workflow.
Add a submit button at the bottom of your form. Click the button and set up Click Actions to link to the next canvas view and enable “Submit Contact Form.” This checkbox is critical; without it, submissions won’t reach your inbox or Showit’s backup storage.
Create a second canvas view within the same canvas for your confirmation message. Design a simple thank-you note that acknowledges the visitor’s submission and sets expectations for your response time.
Integrating Third-Party Form Providers
For advanced features like conditional logic, file uploads, or sophisticated email automation, third-party forms offer more flexibility than Showit’s built-in option.
ConvertKit, Flodesk, and HoneyBook are popular choices among Showit users. These platforms provide embed codes that you can paste directly into Showit using the Embed Code widget.
In your form provider’s dashboard, create and customize your form. Most platforms offer inline forms designed specifically for embedding on websites. Copy the embed code provided by the platform.
Back in Showit, navigate to the page where you want the form to appear. Click the middle icon in the bottom toolbar and select Embed Code. Paste your copied code into the custom code box and click Save.
Resize the embed box to fit your design on both desktop and mobile views. Test the form by submitting a sample entry to ensure data flows correctly to your email marketing platform.
Contact Form Best Practices
Keep forms short and focused. Every additional field you require reduces completion rates. Ask only for information you truly need at this stage of the customer journey.
Use clear, specific labels rather than vague placeholders. Instead of just “Email,” try “Your Email Address” to eliminate any confusion about what you’re requesting.
Never collect sensitive information like credit card numbers or social security details through basic contact forms. Showit’s standard forms lack the encryption necessary for secure financial data handling.
Test your forms regularly to ensure submissions are reaching your inbox. Email providers sometimes flag automated form emails as spam, so add noreply@showit.co to your contacts and check your spam folder periodically.
Embedding Google Maps on Your Showit Site
Google Maps helps visitors find your physical location without leaving your website. It builds trust by showing you’re a real business with a verifiable address.
Location-based elements are particularly valuable for local SEO. When combined with Showit SEO optimization, embedded maps can support stronger local visibility.
Getting Your Google Maps Embed Code
Visit Google Maps in your browser and search for your business address. Once your location appears on the map, click the Share button on the left side panel.
Select the Embed a Map tab in the popup window. Google generates an iframe embed code that you can customize with different size options. Choose the size closest to your needs; you’ll adjust dimensions in Showit anyway.
Click Copy HTML to grab the embed code. This code contains all the information needed to display your location on your Showit website.
Adding the Map to Your Showit Page
In your Showit editor, navigate to the page where you want the map to appear. Contact pages and footer site canvases are common locations for embedded maps.
Click the center icon in the bottom toolbar and select Embed Code. A new embed box will appear on your canvas. Double-click the box to open the Embed Info panel.
Paste your Google Maps embed code into the custom code field and click Save. The map preview will appear in your Showit editor, though it may not be fully interactive until you preview or publish your site.
Resize the embed box to fit your design layout. Adjust width and height separately for desktop and mobile views to ensure the map displays properly on all screen sizes.
Use the alignment tools in the Embed Info panel to center the map horizontally or vertically within the canvas. This ensures consistent placement regardless of screen size variations.
If you’re refining global elements like footers, this works best when your site structure is clean and consistent across pages—something we focus on during Showit optimization projects.
Customizing Your Map Display
Google Maps offers several display options within the embed code. You can modify the URL parameters to show different map types, zoom levels, or specific features.
Standard map view shows roads and basic landmarks. Satellite view displays aerial photography. Terrain mode highlights elevation and natural features. Choose the view that best suits your business and location.
Adjust the zoom level by modifying the URL parameter or creating a new embed code with a different zoom setting. Tighter zoom focuses on your immediate area, while wider zoom provides neighborhood context.
For businesses with multiple locations, create separate embed boxes for each address. You can use tabs or click actions to allow visitors to switch between locations without cluttering your page.
Displaying Your Instagram Feed on Showit
Instagram feeds keep your website content fresh and give visitors a glimpse into your brand personality and recent work.
These visual touchpoints are especially effective on portfolio pages, about pages, and sales pages built with custom Showit website design.
Using Showit’s Social Grid Widget
Showit offers a built-in Social Grid Widget that connects directly to your Instagram account, making it the easiest way to display your feed.
In your Showit editor, click the bottom toolbar icon and select Social Grid from the dropdown menu. Place the widget on your canvas where you want your Instagram feed to appear.
In the right Properties Panel under Social Grid Settings, click Connect Instagram. You’ll be prompted to log into Instagram and grant Showit permission to access your photos.
Note that as of December 2024, you must have a Creator or Business Instagram account to use this feature. Personal accounts won’t connect due to Meta’s API restrictions.
Once connected, select your Instagram account from the dropdown menu in the Social Grid Settings tab. If you don’t see your account immediately, refresh your browser.
Customize the grid layout by adjusting the number of rows and columns. More posts create a fuller feed but require more vertical space. Three columns by two rows is a common balanced layout.
Set the image gap to control spacing between photos. Tighter gaps create a cohesive grid, while wider spacing gives each image room to breathe.
Repeat the setup process for your mobile canvas, adjusting the layout to fit smaller screens. Two columns by three rows often works better on mobile than trying to replicate the desktop grid.
For creators using Instagram as a primary marketing channel, pairing this feature with a dedicated Instagram links page in Showit creates a seamless ecosystem between social and site traffic.
Troubleshooting Instagram Connection Issues
Instagram feeds occasionally disconnect due to Meta’s security token expiration policies. This is outside Showit’s control and affects all third-party integrations.
If your feed stops updating, reconnect your Instagram account through the Social Grid Settings panel. The process is quick and restores functionality immediately.
Some users encounter OAuth errors when connecting. This usually happens when your “Off-Facebook Activity” setting is turned off. Visit your Facebook Settings, find Off-Facebook Activity, and enable “Connect future activity” to resolve this issue.
Upload fallback images in the Social Grid Settings panel. These placeholder images display if your Instagram ever disconnects, preventing blank spaces on your published site.
Alternative Instagram Embed Methods
If you need more customization than the Social Grid Widget offers, third-party services like SnapWidget, LightWidget, and SociableKIT provide additional options.
These services generate custom embed codes that you paste into Showit’s Embed Code widget. They offer features like customizable layouts, filtering options, and different display styles.
Most third-party Instagram widgets operate on freemium models. Basic features are free, while advanced customization and removal of branding typically require a small one-time or monthly fee.
When choosing a third-party option, prioritize services with reliable APIs and good customer reviews. Instagram’s frequent API changes mean some services stop working while others adapt quickly.
Adding Videos to Your Showit Website
Video content engages visitors longer than static images and text alone. Showit supports multiple video integration methods depending on your needs.
Embedding YouTube Videos
YouTube hosting is ideal for longer videos with audio that you want visitors to play intentionally rather than as background content.
Upload your video to YouTube first. Once published, open the video page and copy the video URL from your browser’s address bar. You only need the unique video ID, the string of characters after “watch?v=” in the URL.
In Showit, click the bottom toolbar icon and select Video. Place the video widget on your canvas and resize it to your desired dimensions.
In the Properties Panel’s Video tab, set the type dropdown to YouTube. Paste just the video ID into the YouTube ID field, not the full URL.
Customize playback settings using the checkboxes below. Auto Play starts the video when the page loads, though most browsers mute auto-playing videos by default. Show Controls displays the play/pause buttons and progress bar.
Loop makes the video restart automatically when it finishes. Show Video Details displays the title and description. Related Videos shows YouTube’s recommendations after your video ends.
For a cleaner presentation without YouTube branding, consider using canvas views. Create View 1 with a cover image and play button. Set the play button’s click action to switch to View 2, where your YouTube video is embedded. This hides the video player until visitors actively choose to watch.
Adding Vimeo Videos
Vimeo offers an ad-free viewing experience and more professional presentation options compared to YouTube. The integration process mirrors YouTube’s method.
Upload your video to Vimeo and copy the video ID from the URL. In Showit, add a Video widget, set the type to Vimeo, and paste the video ID.
Vimeo videos in Showit support Auto Play and Loop settings. Unlike YouTube, Vimeo doesn’t show related videos after playback ends, making it cleaner for business websites.
Vimeo Pro and Business accounts unlock additional features like custom player colors, privacy settings, and lead generation forms within videos. These advanced options enhance brand consistency and conversion potential.
Using MP4 Background Videos
For short, atmospheric background videos without audio, Showit allows direct MP4 uploads to your Media Library.
Videos must be under 8MB in file size and formatted as MP4. Keep them short, ideally 15 to 30 seconds, and compress them before uploading to maintain quality while meeting size requirements.
Upload your MP4 to the Media Library, then navigate to the canvas where you want the background video. In the Canvas Background tab of the Properties Panel, select your video from the media library.
Set the video to Loop for continuous playback. Remember that background videos only appear on desktop views in Showit. For mobile, use an animated GIF or static image instead.
Optimize your videos before uploading using tools like HandBrake or online video compressors. Smaller file sizes improve page load speed without sacrificing visual quality.
Video Integration Best Practices
Place videos strategically rather than overloading every page. Hero sections, about pages, and portfolio showcases benefit most from video content.
Always provide context for videos. Add headlines or captions that explain what viewers will learn or experience by watching. This increases play rates significantly.
For background videos, choose content with subtle movement rather than fast-paced action. Gentle animations like flowing water or slow camera pans work better than rapid cuts or busy scenes.
Test your videos on multiple devices and internet speeds. What loads instantly on your desktop might buffer on mobile, creating frustration rather than engagement.
Linking Buttons and Creating Click Actions
Buttons drive action on your website, but they only work when properly linked to their destinations.
Basic Button Linking
Select your button element, which usually consists of a linked shape and text grouped together. In the Properties Panel, navigate to the Click Actions tab.
For internal page links, choose “Link to Page” and select the destination from your site’s page list. Showit automatically handles the URL structure.
Email links use the “Link to Email” option. Enter the email address, and when visitors click the button, their default email client opens with a pre-addressed message. You can even pre-fill the subject line.
Download links connect to PDFs, images, or other files in your Media Library. Upload your file first, then select “Link to Download” and choose the file from the list. Visitors can save the file directly to their device.
Advanced Click Actions with Canvas Views
Click actions unlock powerful interactive features beyond simple navigation. You can show and hide content, create multi-step processes, and build dynamic experiences without code.
Use “Link to Canvas” to scroll visitors to specific sections of long pages. This works great for one-page websites where navigation jumps between sections rather than separate pages.
“Change Canvas View” powers interactive elements like dropdown menus, popups, and before-after reveals. Create different states of the same canvas and toggle between them based on user clicks.
Combine multiple actions on a single button. For example, link to a page AND scroll to a specific canvas, ensuring visitors land exactly where you want them regardless of how they navigate to that page.
For buttons that should submit forms, always check the “Submit Contact Form” box in addition to any navigation actions. This small checkbox is essential for form functionality.
Mobile Button Considerations
Buttons must be large enough for easy tapping on touch devices. Apple recommends minimum 44×44 pixel touch targets, though 48×48 pixels provides even better usability.
Test button spacing on mobile to prevent accidental taps. If buttons sit too close together, visitors may click the wrong option and become frustrated.
Consider hiding complex button arrangements from mobile in favor of simplified versions. Desktop users can handle detailed navigation, while mobile users benefit from streamlined options.
Creating Popups in Showit Without Code
Popups capture attention for announcements, lead magnets, or exit offers. Showit’s canvas view system lets you build popups without any coding.
This method is also used to build Showit popup boxes without code for email opt-ins, promotions, and announcements.
Popups work especially well when paired with forms, countdown timers, or limited-time offers.
Building a Basic Popup
Create a new canvas or use an existing one. This canvas will house both your default view and your popup view.
In View 1, design your standard page content. This is what visitors see when they first land on the page, before any popup appears.
Click the three dots next to your canvas name and select “Add Canvas View.” This creates View 2, where you’ll design your popup.
In View 2, add a semi-transparent dark rectangle that covers the entire canvas. This creates an overlay effect that dims the background content and draws focus to your popup.
Set the rectangle’s stacking order to 2 or higher to ensure it appears above other page elements. Use the Color tab to adjust opacity, creating that characteristic popup dimming effect.
Layer a smaller rectangle or shape on top of the overlay for your actual popup content. Style this box with your brand colors, rounded corners, or shadows to make it pop visually.
Add your popup content: headline, body text, form fields, buttons, or images. Design as you would any other canvas section, but keep the content focused and concise.
Create a close button in the corner of your popup. Set its click action to change back to View 1, allowing visitors to dismiss the popup and return to normal browsing.
Popup Trigger Options
Popups can appear on page load, after a delay, or based on specific user actions. Each trigger serves different purposes.
For immediate popups that appear as soon as the page loads, set your canvas to start on View 2. Visitors see the popup first, before accessing the main content.
Delayed popups require a bit of creativity. Use an embedded countdown timer or third-party popup tool for time-based triggers. Showit’s native features don’t include automatic timed delays.
Click-triggered popups work perfectly with canvas views. Add a button or element anywhere on your page that changes the canvas view when clicked. This could be a promotional banner, call-to-action, or “Learn More” link.
Exit-intent popups require third-party tools since Showit doesn’t track cursor movement. Services like ConvertFlow or OptinMonster specialize in exit-intent detection and integrate via embed codes.
Popup Design Best Practices
Keep popup content brief and focused on a single goal. Whether capturing emails, announcing sales, or sharing news, clarity drives conversion better than complexity.
Make the close button obvious and easy to find. Frustrated visitors who can’t dismiss a popup will leave your site entirely rather than engage with your content.
Ensure popups are mobile-friendly with larger text and touch-friendly close buttons. What works on desktop may feel cramped or difficult to dismiss on phones.
Adding Countdown Timers for Urgency and Scarcity
Countdown timers create urgency around limited-time offers, product launches, or event registrations. They increase conversion rates by motivating immediate action.
If you want to implement urgency cleanly, this guide complements how to add a countdown timer in Showit for step-by-step execution.
Countdown timers are also highly effective inside notification bars, which can stay visible sitewide during promotions.
Choosing a Countdown Timer Solution
Showit doesn’t include built-in countdown functionality, so you’ll need a third-party tool or widget. Popular options include Common Ninja, POWR, Deadline Funnel, and TickCounter.
Free widgets like Common Ninja and POWR offer basic countdown functionality with customizable styling. They’re perfect for promotional countdowns with fixed end dates.
Advanced services like Deadline Funnel provide evergreen timers that create personalized deadlines for each visitor. This approach prevents users from gaming the system by refreshing or returning later.
Implementing a Countdown Widget
Sign up for your chosen countdown timer service and create your timer in their dashboard. Customize the appearance to match your brand colors and fonts.
Set your end date and time, being specific about time zones to avoid confusion. Most services automatically handle time zone conversion for visitors.
Copy the embed code provided by the timer service. This typically includes both HTML and JavaScript elements needed for full functionality.
In Showit, add an Embed Code widget to the page where you want the timer to appear. Common placements include the top of sales pages, above product descriptions, or in notification bars.
Paste your countdown code into the embed box and save. Adjust the box size on both desktop and mobile to ensure the timer displays properly without cutting off digits or text.
Countdown Timer Best Practices
Match the urgency of your timer to the actual time sensitivity of your offer. Don’t create false scarcity with fake deadlines, as this erodes trust when visitors discover the deception.
Use clear language above or below the timer explaining what happens when time expires. “Sale ends in” or “Registration closes in” sets proper expectations.
Consider notification bars for sitewide timers promoting major sales or events. These sticky elements remain visible as visitors browse, maintaining urgency throughout their session.
Test your timer thoroughly before launching. Verify that it counts down correctly, displays properly on all devices, and actually expires at the specified time.
Countdown timers pair powerfully with limited inventory counters or “Only X spots left” messaging. Combined scarcity tactics amplify urgency without overwhelming visitors.
Troubleshooting Common Integration Issues
Even straightforward integrations sometimes encounter hiccups. Understanding common issues and their solutions saves time and frustration.
Forms Not Submitting
If contact form submissions aren’t reaching your inbox, first check the “Submit Contact Form” checkbox in the button’s click actions. This is the most common oversight.
Verify that the email address on your Showit account is correct and accessible. Forms send to the account email by default.
Add noreply@showit.co to your email contacts and check spam folders. Some email providers incorrectly flag form notifications as junk mail.
Embed Codes Not Displaying
When embed codes don’t show properly, first verify you copied the complete code including all opening and closing tags. Partial codes fail silently.
Some platforms require specific embed code versions for different website builders. Look for “iframe” or “JavaScript” versions if your initial code doesn’t work.
Check the embed box sizing on both desktop and mobile. If the box is too small, content may be clipped or hidden from view.
Instagram Feed Not Updating
Instagram feeds sometimes disconnect due to Meta’s security token expiration. Reconnect your account in the Social Grid Settings to refresh the connection.
Ensure you’re using a Business or Creator Instagram account. Personal accounts lost API access in December 2024 and can no longer connect to Showit.
If you see OAuth errors, enable “Connect future activity” in your Facebook Off-Facebook Activity settings. This Meta privacy setting can block Instagram connections when disabled.
Videos Not Playing
For YouTube or Vimeo videos, confirm you pasted only the video ID, not the full URL. Extra URL parameters can break the embed.
Background videos must be under 8MB and formatted as MP4. Larger files or different formats won’t upload or play correctly.
Remember that background videos only work on desktop. Mobile browsers don’t support auto-playing background videos, so prepare alternative images for mobile views.
Optimizing Functionality for Performance
Adding features improves user experience, but too many integrations can slow your site. Strategic optimization maintains speed while delivering functionality.
Limit the number of third-party embeds per page. Each external script adds load time and potential points of failure.
Compress all media before uploading, including images, videos, and documents linked through download buttons. Smaller files load faster and consume less bandwidth.
Test your website regularly using tools like Google PageSpeed Insights. Monitor how integrations affect load times and make adjustments when performance drops.
Consider lazy loading for embeds that appear below the fold. This delays loading non-critical content until visitors scroll down, speeding up initial page rendering.
Mastering these functional elements transforms your Showit website from a pretty design into a conversion-focused marketing tool. From capturing leads with optimized contact forms to creating urgency with countdown timers, each integration serves a strategic purpose in your customer journey.
As you implement these features, maintain a balance between functionality and simplicity. The goal isn’t to add every possible element, but to choose the integrations that best serve your business objectives and user experience.
