class="ciButton btn-pink"
Button label
class="ciButton btn-green"
Button label
class="ciButton btn-blue"
Button label
class="ciButton btn-orange"
Button label
class="ciButton btn-red"
Button label
class="underlined"
Here the link with underline
Additional CSS class you can use:
space-t : Add space at top
space-b : Add space at bottom
center : Center text
corner-tl : Top Left
corner-tr : Top Right
corner-bl : Bottom Left
corner-br : Bottom Right
overflow : to force element to be inside itself (no overlapping)
Format like tagline under H1 <div class=”excerpt space-t space-b center”>
Black like footer: <section class=”bgBlack space-t space-b”>
Text Side
<h3> lowercase title </h3> <div class="excerpt2"><p> Copy copy </p></div>Image Corners
class="corner-tl corner-tr corner-bl corner-br overflow alignright”
Separator Image Shifts
Div to move image to above div such as green circle man on homepage.
<div class="man">
Need one review to activate.
Block Code
<script type="text/javascript" src="https://www.gartner.com/reviews/public/Widget/js/widget.js">
</script>
<script type="text/javascript">
GartnerPI_Widget({
size: "small",
theme: "dark",
sourcingLink: "",
widget_id: "ZmUyZTQ3N2YtMDNmNy00ZjJlLWE1ZWEtZjEwNmViZWRlMDM1",
version: "2",
container: //DOM node in which the widget is to be rendered [e.g. document.querySelector("#myNodeContainer")]
})
</script>
Line Widget Code to be integrated:
<script type="text/javascript"
src="https://www.gartner.com/reviews/public/Widget/js/widget.js">
</script>
<script type="text/javascript">
GartnerPI_Widget({
size: "line",
theme: "dark",
sourcingLink: "",
widget_id: "NTk5YjU4ZjItMDg3Ni00NGNlLTlmNzEtZWIzMjllMDAwZjMx",
version: "2",
container: //DOM node in which the widget is to be rendered [e.g. document.querySelector("#myNodeContainer")]
})
</script>
Steps for Widget Integration with your website:
Step 1: Update the code “container”
Update the container in the script to include your HTML container, indicating widget location on the page. Replace our “container” example with your own HTML selector by passing the HTML element’s id or class attribute.
• container: //DOM node in which the widget is to be rendered [e.g. document.querySelector(“#myNodeContainer”)]
Example: If the HTML selector on your page is: <div id=”widget-container”>…</div> , update container as:
container: document.getElementById(“widget-container”)
Step 2: Embed the code at a designated place on your page
The easiest way is to add it right before the closing BODY tag. The ideal placement of the edited widget script is at the end of the page code itself.
• Please note that the HTML container must exist on the page and be placed before the code snippet in the HTML document for the widget to work correctly.
• Although the widget script can be placed in the HEAD tag, it will require additional development work from your team in order to work as expected.
Make sure to test the widget from your website; testing from your local file system will likely prevent proper fetching of resources. You can also customize the widget to match your website style. Please refer to customization guidelines for details at:
https://gtnr.io/HxQxDBsrM
Read detailed Guide at: https://gtnr.io/z2HQpMqlt
Still Need Help? Please reach out to your Peer Insights program manager or email us at peerinsightvendorsuccess@gartner.com with details.
