In this article
Before you start
Showcases are available on all plans.
Depending on your website provider, you may need to upgrade to a higher plan to add custom code.
To access the Showcase feature, you need to have the Admin or Manager role. If you don't have that role, ask an Admin on your company's account for permission; here's what they'll need.
We can help you get the code installed on your site with our website experts. Send an email to [email protected] or chat in the app to get started.
Create a Showcase Project
Login to the CompanyCam.
Select any Project you want to work on and click the Showcase This Project button in the upper right corner.
Once in the Showcases widget, you must select or populate:
Cover image
Project Type (type in own or select from the list)
Photos to publish. Hide any photos you don't want to be published with Choose Photos to Hide.
Project Title
Products Used (type in your own)
Showcase Title
Showcase Description (Optional)
Once all required fields have been filled, click Create.
Install the Showcase Widget
*You must create at least 1 Showcase to install the Showcase Widget on your website. You only have to publish the Showcase widget on your website once for it to display your active Showcases*
After you've created a Showcase you will see Showcases appear on your left sidebar as an option.
From the Showcases screen click Install Showcase to access the code to embed on your website.
**Keep this screen up for reference and open your website in another window or tab.**
Copy Step 1's code snippet using either the copy button or by highlighting the snippet and manually copying the snippet to the clipboard.
Paste the snippet to your site. We recommend placing it just before the closing tag.
Copy Step 2's snippet.
Paste Step 2's snippet where you want the showcase to display on your site in the section as long as it's placed above the Step 1 snippet.
Now it's time to install it on your website. You will only have to do this once! See below for Squarespace and WordPress instructions.
Once saved, double-check the installation was successful by heading to the page where the widget was installed. The widget (like the one below) should appear in the placement that was selected.
**If the placement doesn't appear where you selected to put it, try refreshing the page.**
Install the Showcase widget using Squarespace
Step 1 - Insert code snippet into the footer
In the Squarespace site editor:
Go to Settings > Advanced > Code injection.
Paste the code from Step 1 of the CompanyCam setup guide into the footer of the code injection page inside of the , just before the closing tag.
Step 2 - Placing the Showcase Widget
Go to the Pages section and choose the page you want the Showcase widget to appear on.
Once the page is selected, click the + icon and add a new block (NOT a new section).
Choose > Code.
If there's any text in the code block, remove it.
Paste the code from Step 2 of the CompanyCam setup guide.
Save and navigate to the page to make sure the widget is displaying as expected.
Install the Showcase widget using WordPress
Step 1 - Insert Code Snippet into the Footer
In the WordPress editor, there may be a couple of ways to navigate to the footer to insert the code snippet from Step 1. The most user friendly way is by using a plug-in:
Go to Plugins on the left navigation menu and search for install header and footer > Install the Plugin named Insert Headers and Footers by WPBeginner to Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager by WPCode.
Once installed go to Code Snippets on the left navigation menu > Header & Footer > and copy the embed code from Step 1 of the Showcases code, paste it into the Footer section > Save Changes.
If the plug-in doesn't work for the installer, below are additional methods to access and edit the Footer file.
Go to Appearance in the left-hand navigation menu > Themes.
Select the Customize button for the theme your site is actively using.
Go to Patterns > Footer (under Template Parts).
Select the “+” button to add a new block and select the Custom HTML block.
Paste the code snippet from Step 1 just before the closing tag.
**If going this route, the screen for inserting the code snippet would look like this above.*
Step 2 - Placing the Widget
Go to Pages using the left-hand navigation bar and select the page the Showcase widget should live in. Once decided, follow the instructions below:
Click Edit Page
Using the Block Editor interface, Add a Block
Select HTML
Paste the code snippet from Step 2 in the CompanyCam setup guide into the HTML block
Click Update to save. **If you select Preview on this block, the Showcase widget might not display in the preview, but it will when you open the page to test it out. Navigate to that page on the web to ensure the changes were implemented correctly as a double check.*
Step 3 - Testing
Once saved double check the installation was successful by opening a new tab and navigating to the web page where the widget was installed. The widget, example below, should appear in the placement that was selected
Make sure to function test the Showcase on desktop and mobile devices before publishing the webpage.
Able to navigate and open different Showcase projects
Scroll through the project timeline
Click on a photo to bring up the full screen view
Navigate from one photo to the next or the previous one without leaving the full screen view using the keyboard and mouse.
Exit full screen view
Hit view all projects to go back to the contractor's website
Open each filter - Project types, products used, City and State
Select filter and save
Select filter and cancel
Select filter and clear
Clear all existing filters
Ensure there are no headers, footers, etc. obstructing the presentation of the Showcase or navigation between the Showcase and the contractor's website.
Showcase FAQs
Q. Will I need to install Showcases for each project I'd like displayed on my website?
A. The Showcase widget only needs to be installed once. After installation, you can publish additional projects by following the instructions laid out in Step 1 of this article.
Q. Can I add and/or delete labels for the job or project?
A. When adding Project Type you can select from the list of pre-added projects or type to add your own. Once a Project Type has been added to your list it will be there for all future Showcases and cannot be removed from the list.
Q. Can I add and/or delete materials used for the job or project?
A. When adding Products Used you can add products that you used on that job or Project. Once a Products Used label has been added to your list it will be there for all future Showcases and cannot be removed from the list.
Q. How can I make changes to a Showcase?
A. If you want to edit what you've published, simply go back to the Showcases tab > Edit (pencil icon) and make the needed changes > click Update.
Q. Why aren't the new photos I added displaying on my showcase?
A. Once you add new photos to your Project, you will want to choose which photos are hidden in your Showcase. To edit which photos are displayed, click the Showcases tab > Edit (pencil icon) > click Choose photos to hide > select which photos are hidden > click Update.
Q. Am I able to hide Showcases from displaying on my website? Is there a way to publish it again once it's been hidden?
A. If you'd like to hide a Showcase Project, you can do so by going to the Showcases tab > toggle the Showcase off. You can also unhide a project by going through the same workflow and turning the toggle from No to Yes.
Q. How do I delete a Showcase?
A. If you'd like to delete a Showcase Project entirely, you can do so by going to the Showcases tab > Edit (pencil icon) > Delete Showcase > Confirm delete.
Q. How can I see all of my active and hidden Showcases?
A. You can see all of your Showcases you have active or inactive by going to the Showcases option on the left sidebar. Here is where you can manage those Showcases, too.
Q. Are Showcases impacted or indexed by SEO?
A. Our Showcases don't directly affect SEO, there are many factors at play on each individual website. A recommendation from Google for ensuring JS-injected content can be indexed: To make sure that Google can still see your content after it’s rendered, use the Mobile-Friendly Test or the URL Inspection Tool and look at the rendered HTML. If you have any additional questions, feel free to reach out to CompanyCam Support at [email protected]!