Skip navigation links
Digital Experience Studio > Social Media > Sprinklr > Social Publishing >

Gallery

Gallery

What is Gallery?

Sprinklr’s Gallery functionality allows units to embed social media posts in websites. These can take many forms, and the visual presentation is completely customizable to match MSU brand standards and website aesthetic.

This functionality is free to Sprinklr users, but it is not turned on by default.

Feature Information

There are multiple types of Gallery layouts:

  • Carousel (horizontal or vertical) — A single row or column of image thumbnails. Users can scroll through the images to see additional thumbnails.
  • Slider — A single thumbnail with text. Users can scroll to see additional thumbnails in the slider.
  • Packery cascade — A compact view of image thumbnails in a brick offset layout.
  • Packery simple — An expanded view of image thumbnails in a brick offset layout.
  • Packery tile — All image thumbnails are cropped to the same size and appear in a grid layout.
  • Packery editorial — Image thumbnails are arranged in a grid tile layout. Some tiles appear larger than others.

Create and Embed a Gallery

Using Gallery requires first creating the data source feed that powers the gallery. Then a gallery is designed and published. Finally, embed code is added to a website. Social posts meeting the rules established in the data feed will automatically appear on the webpage in the gallery. Read below for information on creating a gallery and embedding it in a website.

Before creating a gallery, users must create the dashboard column that will serve as the data source for the gallery.

  1. Choose an existing engagement dashboard or create an engagement dashboard specifically for the purpose of housing a gallery column(s).
  2. Add a column to the dashboard.
  3. Filter the column to include the messages that should appear in the gallery. Do this through the column settings panel (not through column search and filter on the dashboard).
  4. Click the appropriate button to create (or save changes to) the column.
Quick Tip: Try using Outbound (Sent) or a platform-specific engagement column. Filter to include only public messages. Users also can filter by outbound category, account, account group, custom fields or other options. To create a custom field specifically designed for tagging posts that should be included in the gallery, contact Comms.WebSupport@msu.edu to discuss setting something up that meets unit needs.

Once a source feed for the gallery content has been created, create the gallery. Follow the following steps:

  1. Navigate to the Gallery section of Sprinklr. This is located under “Manage Your Customer Experience” under the “Love” column of the CXM Governance Console menu in the Sprinklr launchpad.
  2. Click “Create” (upper right corner) to create a new gallery.
  3. Choose a gallery layout. This can be changed later.
  4. Name the Embed. University Communications and Marketing recommends choosing a name that clearly defines the content and/or location of the gallery. Click “Confirm.”
  5. Choose the dashboard where the data source lives. Choose the appropriate column. Click “Confirm.”
  6. Adjust the gallery settings using the four tabs along the right side of the Gallery edit panel (see “Gallery Settings,” below). Toggle between different device icons across the top of the Gallery edit pane to view the gallery as it would appear on a phone, tablet, laptop or oversized monitor.
  7. Click “Publish” to update the gallery with the changes. Clicking “Publish” will push these changes live to any pages where the gallery is already embedded.
Note: Users can edit a gallery after it has been published and embedded. Once changes are complete, click “Publish” to push the changes live.

Design tab:

  • Embed type — Toggle between different gallery styles and layouts. 
  • Post and text only post — Adjust the colors, text size and user area size in the individual posts. This allows users to adapt the gallery to match MSU branding standards and the website where the gallery will appear.
  • Card — Adjust the layout, image size and text format for how posts will appear as cards. When a gallery thumbnail is clicked, a pop-up of the card will appear, allowing a visitor to scroll through the posts.
  • Custom field filter — This allows users to filter posts in the column by a custom field. University Communications and Marketing can work with units to create a custom field and workflow around unit gallery needs. Contact Comms.WebSupport@msu.edu for more information. 
  • Columns and gutter — Adjust these settings to control the layout of grid galleries.
Note: University Communications and Marketing recommends aligning the design of the Gallery to MSU’s brand standards. The brand site includes color palette guidelines, including HEX color codes that can be used in Sprinklr’s Gallery editor formatting pane.

Data tab:

  • Edit the data source dashboard and/or column.
  • Manage the publishing period of posts eligible for inclusion in the gallery.
  • Limit the number of posts included in the gallery.
    Code tab:
  • Edit custom CSS, JSON and JS code for the gallery.
Note: University Communications and Marketing does not provide code support for Sprinklr galleries or website embeds, aside from Sitecore websites. Work with the unit website manager for assistance needed with Sprinklr Gallery functionality.

Settings tab:

  • Edit additional settings related to how posts are loaded in the gallery.
Quick Tip: For additional resources on creating and editing a gallery, see the full set of Gallery guides in the Sprinklr Knowledge Platform.

Once a gallery is created it can be embedded into a webpage.

  1. Click “Publish” at the bottom of the Gallery edit page.
  2. Click “Get Embed Code” at the top of the page. 
  3. Copy and paste the embed code into the appropriate section of the webpage.
Quick Tip: Some website content management systems require pasting different parts of the code in different sections of the CMS. See “Embedding in Sitecore,” below, for additional information.
Note: University Communications and Marketing does not provide code support for specific website embeds. Work with the unit website manager for assistance. If the unit develops a process for embedding a gallery in another CMS, University Communications and Marketing would love to work with the unit to add it to this documentation. Please contact Comms.WebSupport@msu.edu to discuss how these learnings can benefit other campus communicators.

Embedding Galleries in Sitecore XM Cloud

Coming soon! A Sprinklr Gallery component is in development. Once it is available, an announcement will be posted to the Updates page of this website, along with instructions for use. 

Embedding Galleries in Sitecore XP

Sitecore XP requires pasting code in two sections of a rich text component to embed a gallery in a Sitecore component on a page.

  1. Create a rich text component for the gallery.
  2. Click to edit HTML for the rich text component.
  3. Paste the embed code for the gallery embed in the HTML for the rich text component. This is all the code that starts with <div id= and ends with </div>. There may be multiple lines of code so be sure to include everything through the last </div> reference. Save and publish this component. The remaining code is script that needs to be applied at the page level (instead of the component level).
  4. In the site tree, navigate to the page where the rich text component is to be placed. Click on the page.
  5. Scroll to the JavaScript section. Click to expand this menu if it is collapsed.
  6. Paste the remaining Sprinklr code in the “Tracking body before close” box. This is all the code that starts with <script id= and ends with </script>.
  7. Save and publish the page.

Documentation updated: Nov. 1, 2024

Social Publishing