Create and Publish a Showcase for your Website
Showcases are a great way to display your work from CompanyCam onto your website. Use the photos you take for your Projects to display a job from start to finish so prospective clients can see how you work.
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 firstname.lastname@example.org or chat in app to get started.
Create a Showcase Project
- Login to the CompanyCam.
- Select any Project you want to work in 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)
3. 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’s <body>. We recommend placing it just before the closing </body> tag.
- Copy Step 2’s snippet.
Paste Step 2’s snippet where you want the showcase to display on your site in the <body> 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 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 <body>, just before the closing </body> 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 is 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 widget is displaying as expected.
Install Showcase widget using WordPress
Step 1 - Insert Code Snippet into the Footer
In the WordPress editor, there may be a couple 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.
- Once installed go to Settings on the left navigation menu > Insert Headers and Footers > and copy the embed code from Step 1 of the Showcases code > Save.
If the Plugin 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 > Theme Editor.
- Find and open the footer.php file on the right > scroll down and paste the code snippet from Step 1 just before the closing </body> tag.
If that doesn't work:
- Go to Appearance in the left hand navigation bar > Themes.
- Click Theme Settings > Header/footer scripts > scroll down and paste the code snippet from Step 1 just before the closing </body> tag.
**If going this route, the screen for inserting the code snippet would look like this below.*
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 editing interface, Add Row
- Select Full Width Text
- When the new block is created, make sure it is set to Text and NOT Visual
- Set Add Background to No
- Paste the code snippet from Step 2 in the CompanyCam setup guide into the text block
2. Click Preview. **If Steps 1 and 2 were performed correctly, the Showcase widget will display in the preview. 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 of a photo to bring up the full screen view
- Navigate from one photo to the next or previous without leaving the full screen view using keyboard and mouse and without using keyboard and mouse
- Exit full screen view
- Hit view all projects to go back to the contractor 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 website
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- You can see all 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.