How it works

Each social platform is represented as a round button with the logo of the platform in the center, and whose background color is representative for the platform. When the survey taker's mouse pointer hovers over the button, the button:

• Grows slightly in size.
• Background color brightens by 20%.
• Gets a shadow to make it appear that the button is rising off the page.

When the survey taker clicks one of these buttons, the behavior is platform-specific. Generally, a new pop-up window (modal dialog) opens either to a predefined size, or on smaller screens like mobile devices, the window fills the screen. The button changes to a disabled state with a checkmark either when the window opens or when Medallia Experience Cloud confirms that the survey taker posted to it.

For more information, see:

• Facebook
• Google Review
• Instagram
• Pinterest
• X
• YouTube

Configure social links

In a survey:

• The social links are typically placed on the End page of the survey (typically called the Thank-you page).
• Each platform link is an HTML element.
• An additional, final HTML element, has the HTML code that renders the social links.

In the Survey editor, the survey looks similar to this example, which has three links on the End page:

For each social link to include on the survey:

1. Create one HTML element.

2. Name the element in an identifying manner, such as Social Links - <Platform> Configuration, where <Platform> is the name of the social media platform. For example, Social Links - Instagram configuration.

3. Add the HTML code that configures the link for the platform. See the descriptions of the platforms for details.

   The configuration values are literal or retrieved from Data fields to allow for dynamic branding of the link. For example, this allows a Google review to be about the specific unit based on the unit's Google Places ID. It also allows unit-specific hashtags to be inserted in X or Facebook posts.

4. Optionally, add Content logic to the HTML elements to appear based on regular conditions — for example, you may only want to show Google reviews for properties that have a Data field set to the Google Places ID for the property.

5. Add a final HTML element to render the social link toolbar. Give it an identifying name like Social Links - Render. Configure the element with this HTML code:

   <div id="social-links-toolbar"></div>
   
   <link rel="stylesheet" type="text/css"
         href="https://cdn.medallia.com/appsol-social-links-jslib/master/latest/styles.css">
   
   <script src="https://cdn.medallia.com/appsol-social-links-jslib/master/latest/bundle.js"></script>

Create social links manually

Instead of making use of the bundle provided by Experience Cloud, you may also create a set of social links manually. This can be of use in special cases where you need greater customization.

1. Add an HTML element to the on the End page of the survey (typically called the Thank-you page).

2. Set the HTML Markup field of that element based on the example below:

   <br/> 
   <br/> 
   <br/> 
   <br/>
   
   <center>
   <a href="[COMPANY WEBSITE"_blank">Website</a>   |  
   <a href="[NEWSLETTER SIGNUP SITE]" target="_blank">Marketing List</a>
   <br /> <br />
   <table>
   	<tr>
   		<td>
   		<a href="[COMPANY FACEBOOK PAGE]" target="link1">
   		<img src="[FACEBOOK PNG IMAGE]" alt="Facebook" class="responsive-img social-media" />
   		</a>
   		</td>
   
   		<td>
   		<a href="[COMPANY TWITTER PAGE]" target="link2">
   		<img src="[TWITTER PNG IMAGE]" alt="Twitter" class="responsive-img social-media" />
   		</a>
   		</td>
   		<td>
   		<a href="[COMPANY YOUTUBE CHANNEL]" target="link3">
   		<img src="[YOUTUBE PNG IMAGE]" class="responsive-img social-media" />
   		</a>
   		</td>
   		<td>
   		<a href="[COMPANY INSTAGRAM PAGE]" target="link3">
   		<img src="[INSTAGRAM PNG IMAGE]" class="responsive-img social-media" />
   		</a>
   		</td>
   	</tr>
   </table>
   </center>

These links can dynamically direct to location-based review pages by piping in a URL to an href attribute.