https://github.com/haplifeman/nuxt-trustbox-module

A NuxtJS module thats injects Trustpilot TrustBox code and provide a `<trustbox />` component
https://github.com/haplifeman/nuxt-trustbox-module

nuxt nuxt-module nuxtjs nuxtjs-module trustboxes trustpilot

Last synced: 3 months ago
JSON representation

A NuxtJS module thats injects Trustpilot TrustBox code and provide a `<trustbox />` component

• Host: GitHub
• URL: https://github.com/haplifeman/nuxt-trustbox-module
• Owner: HapLifeMan
• License: mit
• Created: 2019-08-29T18:55:41.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-03-13T16:10:56.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T05:04:21.701Z (3 months ago)
• Topics: nuxt, nuxt-module, nuxtjs, nuxtjs-module, trustboxes, trustpilot
• Language: JavaScript
• Homepage: https://yzm19.sse.codesandbox.io/
• Size: 1.3 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 24
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# TrustBox module for Nuxt

[![npm (scoped with tag)](https://img.shields.io/npm/v/nuxt-trustbox-module/latest.svg)](https://npmjs.com/package/nuxt-trustbox-module)

[![npm](https://img.shields.io/npm/dt/nuxt-trustbox-module.svg)](https://npmjs.com/package/nuxt-trustbox-module)

> A NuxtJS module thats injects Trustpilot TrustBox code and provide a `` component

**CodeSandbox: [CODE REPRODUCTION](https://codesandbox.io/s/nuxt-trustbox-module-example-yzm19) | [FULL PAGE EXAMPLE](https://yzm19.sse.codesandbox.io/)**

## Why this package/module?

Because I use Nuxt for a lot of my projects and the classic TrustBox installation (injection of the script into the `head.scripts` of the `nuxt.config.js` configuration file doesn't work).

First I tried to create a plugin that injects the Trustpilot's script, the widget were displayed but only on the first load (SSR). When I switched between pages, if the widget was into the page, it wasn't displayed anymore because **there's an initialize function into the script executed on its load**.

So I had to re-execute this initialization function when a new trustbox-widget is added to the DOM and after the script was loaded 1 or more pages before. Then I decided to create the `` component which calls the initialization function when it's mounted.

Also, as the businessunitId and businessunitName should always be the same on your site, if you want to display multiple TrustBoxes without specifying these attributes each time, I added a config file.

## Table of Contents

* [Requirements](#requirements)

* [Installation](#installation)

* [Getting Started](#getting-started)

* [i18n Translation](#i18n-translation)

## Requirements

* yarn

* NuxtJS

* NodeJS

## Installation

```bash

yarn add nuxt-trustbox-module

```

## Getting Started

Add `nuxt-trustbox-module` to `modules` section of `nuxt.config.js`:

```js

{

  modules: [

    // Simple usage

    'nuxt-trustbox-module',

    // With options

    ['nuxt-trustbox-module', {

      businessunitId: 'TRUSTPILOT_BUSINESS_ID',

      businessunitName: 'TRUSTPILOT_BUSINESS_NAME',

    }],

 ]

}

```

Here's how to use it:

```vue

    

```

## i18n Translation

It's very simple to automatically translate the TrustBox if you are using `nuxt-i18n`:

> The `key` attribute is very important to refresh the component when the locale is switched.

```vue

    

```

## Module options

List of possible options in the module which can be passed through the module options or by props:

> Note that the options passed through `nuxt.config.js` are `camelCase` while options passed through `props` are `kebab-case`. 

| Option              | Default  | Required | Description                                                                                                       |

|---------------------|----------|----------|-------------------------------------------------------------------------------------------------------------------|

| businessunitId      | `''`     | true     | Your Trustpilot Business ID, you can find it [here](https://businessapp.b2b.trustpilot.com/#/trustbox/library).   |

| businessunitName    | `''`     | true     | Your Trustpilot Business Name/URL, it's what comes after `https://trustpilot.com/review/businessunitName`.        |

| templateId          | `''`     | true     | Template ID of the TrustBox.                                                                                      |

| styleHeight         | `auto`   | false    | Height of the TrustBox.                                                                                           |

| styleWidth          | `100%`   | false    | Width of the TrustBox.                                                                                            |

| locale              | `en-US`  | false    | Locale to display on the TrustBox into a valid ISO format supported by Trustpilot.                                |

| theme               | `light`  | false    | Theme of the TrustBox (can be `light` or `dark`).                                                                 |

| tags                | `''`     | false    | Template ID of the TrustBox.                                                                                      |

| schemaType          | `''`     | false    | Enabled SEO Rich Snippets if configured to `organization`.                                                        |

| stars               | `''`     | false    | Specify stars to display on some widgets (example: `3,4,5`).                                                      |