JavaScript Widget | Testimonial-Hub.com

The JavaScript Testimonials List Widget is a Web Component, so it can be used on any HTML website, regardless of JavaScript framework.

CDN Link: https://www.unpkg.com/@testimonial-hub/testimonials-widget
NPM package: https://www.npmjs.com/package/@testimonial-hub/testimonials-widget

Please feel free to download the file and host it on your own server, if you would prefer.

Basic Usage

To use the JavaScript widget, simply:

Reference the script tag using the CDN link in the head section of your HTML
Use the custom HTML tag in the location on the page you'd like to use the component

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Testimonials</title>
    <script src="https://www.unpkg.com/@testimonial-hub/testimonials-widget"></script>
</head>
<body>
<testimonials-list slug="your-slug"></testimonials-list>
</body>
</html>

Server side data fetching

In the default configuration (as shown above) the testimonials-list widget will fetch your testimonial data from the client side. It may benefit performance or SEO to have this data be fetched on your server and be provided to the component as a JSON encoded string attribute, as follows:

<testimonials-list
        testimonialsJsonData='[{"bodyText":"Main text of the testimonial","imageUrl":"","name":"Name (Job Title, Company Name)"}]'></testimonials-list>

The implementation for retrieving the API response and setting the HTML attribute during the server side render will be dependent on your tech stack. However, you can refer to the API Reference for information about the API itself.

Fallback Image

If the testimonial was not submitted with an image, then by default the image displayed will be the Testimonial-Hub logo.

If you would like to change this to an image of your choice, you can specify the URL for your chosen image, which should be 150px x 150px.

e.g.

<testimonials-list slug="your-slug"
                   fallbackImage="https://www.yourdomain.com/your-image.png"></testimonials-list>

Styling the component

The component can be themed, similar to how it works on the Testimonial-Hub.com website

Some CSS properties will automatically be inherited from your website, see: CSS Inheritance.

However, to change specific colours used by the widget you can define custom CSS variables. See: CSS Custom Properties

Custom Property	Notes	Default
--testimonials-widget-text-color	default text colour	#000
--image-glow	glow colour around the image	#ed9728
--testimonial-border	border colour (up to 4 colour)	#ffbe7d
--testimonial-background	Background of each testimonial row	inherit

Last modified: 07 December 2023