npm包Gatsby-plugin-trustpilot使用教程

什么是 Gatsby-plugin-trustpilot?

Gatsby-plugin-trustpilot是一个NPM包,它允许开发人员轻松地将Trustpilot评分集成到他们的网站中。这个插件可以帮助你引导你的用户在你的Trustpilot页面上留下评论。Trustpilot是一个在线评论平台,它允许用户评分和评论公司和服务。

这个插件为Gatsby网站的开发者提供了向他们的页面添加一个trustbox的方式,以便展示客户的评论和反馈。

安装 Gatsby-plugin-trustpilot

你可以通过npm或yarn来安装Gatsby-plugin-trustpilot。你也需要确保你的Gatsby应用程序已经安装了Gatsby(version 2)。

使用npm

--- ------- ------------------------

使用yarn

---- --- ------------------------

配置 Gatsby-plugin-trustpilot

要在你的Gatsby应用程序中使用Gatsby-plugin-trustpilot,你需要在gatsby-config.js文件中声明它。

-------------- - -
  -------- -
    -
      -------- ---------------------------
      -------- -
        -- ------- ------------------ ---- ---- ------ ---------- ---------- ---
        --------------- ---------------------
      --
    --
  --
-

在这里,你需要将YOUR_STOREFRONT_ID替换为Trustpilot商家帐户的唯一标识符。你可以在你的Trustpilot帐户资料中找到这个ID。

你也可以通过使用其他选项来自定义插件,例如:

-------------- - -
  -------- -
    -
      -------- ---------------------------
      -------- -
        --------------- ---------------------
        ----------------- ----
        ------ ------------
        ------ -------
      --
    --
  --
-

这里是一些常用的选项,你可以使用它来自定义你的trustbox:

  • businessUnitId:你的Trustpilot商家帐户的唯一标识符(必需)。
  • reviewCountLimit:在信任框中显示的最大评论数(默认为10)。
  • theme:用于呈现信任框的颜色方案(默认为light),还可以为:“light”、“ios-light”或“dark”。
  • width:在其父元素中设置Trustpilot信任框的宽度(默认为“100%”)。

在你的页面中使用 Gatsby-plugin-trustpilot

在你的页面中,你可以使用以下代码来呈现Trustpilot信任框。

------ ----- ---- -------
------ - -------- - ---- --------------------------

----- ---------- - -- -- -
  --------- --
-

------ ------- ----------

这个代码段将在页面上呈现信任框。

你也可以添加其他参数来自定义你的信任框。例如,你可以使用以下参数来覆盖默认的参数:

------ ----- ---- -------
------ - -------- - ---- --------------------------

----- ---------- - -- -- -
  ---------
    -------------
    -----------------
    --------
    ---------
    --------
    --------------
    -----------
    ---------
    --------
    --------------
    ------------
    ---------
    ------------
    ---------
    ----------
    -------------
    ------------
  --
-

------ ------- ----------

原理解析

Gatsby-plugin-trustpilot是如何工作的?

这个插件的原理非常简单。它会从Trustpilot的API获取评分并显示到你的页面上。通过使用插件提供的配置选项,你可以进行自定义和调节以达到最好的展示效果。

你的Trustpilot站点ID和商家ID为插件提供了使用Trustpilot API的访问权限。插件使用API请求在页面中呈现Trustpilot信任框。

结论

到此为止,你已经学会了如何使用Gatsby-plugin-trustpilot将Trustpilot评级集成到你的Gatsby应用程序中。你学习了如何安装和配置该插件,并了解了它的工作原理。

通过在你的网站上添加Trustpilot评级,你可以帮助你的用户更好地理解你的公司和服务,并建立对你公司的信任感。现在,你可以开始使用Gatsby-plugin-trustpilot来轻松集成Trustpilot评分并展示到你的网站上了。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600672693660cf7123b36701


猜你喜欢

  • npm 包 towerflow 使用教程

    前言 随着前端技术的不断发展,我们需要越来越多的工具来支持我们的工作,npm 包是其中重要的一部分。在前端的项目中,我们都会使用到许多 npm 包来实现我们的需求。

    4 年前
  • npm 包 @knightlin/enzyme 使用教程

    React 是目前前端开发领域最受欢迎的库之一,而 Enzyme 是一个基于 React 的 JavaScript 测试工具库。Enzyme 的主要目的是帮助开发者轻松地编写高质量的测试用例。

    4 年前
  • npm 包 roosterteeth 使用教程

    简介 RoosterTeeth 是一个用于构建 Web 应用程序的 npm 包,它提供了许多有用的功能,如数据绑定、事件处理等等。它是由 Rooster Teeth 出品的,是一家艺术和视频制作公司,...

    4 年前
  • npm 包 klatt-syn 使用教程

    在前端开发中,语音合成技术已经越来越成为一个热门技术。klatt-syn 就是一个可以实现多种不同语种的语音合成的 npm 包。本文将为大家介绍 klatt-syn 这个 npm 包的使用教程,让你能...

    4 年前
  • npm 包 blakenoll 使用教程

    简介 blakenoll 是一个用于前端开发的 npm 包,它可以在异步操作中方便地进行任务的等待和回调处理,减少前端开发中的回调地狱问题,提高代码的可维护性和可读性。

    4 年前
  • npm包is-remote的使用教程

    什么是npm包? npm(node package manager)是node.js的包管理器,可以利用npm实现模块化开发,模块是node.js应用程序的基本组成单元,npm使得开发者可以很方便的分...

    4 年前
  • NPM 包 react-faster 使用教程

    React 是一个非常受欢迎的前端框架,它可以让开发者快速构建高质量的 Web 应用程序。但是,由于 React 应用程序通常运行在大型的单页应用程序中,可能会出现性能瓶颈,特别是在处理大规模的数据和...

    4 年前
  • npm 包 news-bias-scorer 使用教程

    简介 news-bias-scorer 是一个基于 Node.js 的 npm 包,旨在为用户提供一种评估新闻媒体报道偏见的工具。 该工具使用机器学习模型对新闻网站进行评估,以便用户能够更好地了解新闻...

    4 年前
  • npm 包 priority-queue-v2 使用教程

    前言 随着 Web 应用程序的复杂性不断提高,前端开发者需要使用更多的数据结构和算法来处理数据。其中一种重要的数据结构就是优先队列。priority-queue-v2 是一个优秀的 npm 包,它提供...

    4 年前
  • npm 包 bs-date-ext 使用教程

    在前端开发中,日期操作是一个不可避免的任务。而大多数前端框架提供的日期组件使用起来并不是很方便,我们需要使用第三方库来完成日期操作。bs-date-ext 就是一个专门为 Bootstrap 设计的日...

    4 年前
  • npm 包 squeakjs 使用教程

    前言 随着技术的不断发展,前端领域也愈加庞大,成为了当前互联网开发的重要方向。其中,npm 是当前前端开发中最常用的包管理器之一。而在 npm 包中,有一款非常实用的包 squeakjs,是一个可交互...

    4 年前
  • npm 包 @strong-roots-capital/cartesian-product-generator 使用教程

    概述 @strong-roots-capital/cartesian-product-generator 是一个可以生成笛卡尔积的工具包。它可以将两个或多个数组中的值组合起来,形成所有可能的组合,然后...

    4 年前
  • npm 包 worksmith-helpers 使用教程

    在前端开发中,npm 包是非常重要的资源。worksmith-helpers 是一个 npm 包,它提供了一系列用于 worksmith 工作流程的辅助函数。 本文将详细介绍 worksmith-he...

    4 年前
  • npm 包 cssomtools 使用教程

    介绍 cssomtools 是一个在 Node.js 中操作 CSS 样式的工具库,可以方便地获取和修改 CSS 样式表中的样式规则,支持多种格式的输入和输出,使用简单方便。

    4 年前
  • npm 包@smartface/smartface.ui-editor 使用教程

    简介 @smartface/smartface.ui-editor 是一个用于 Smartface 平台的 UI 编辑器 npm 包。 使用它可以在 Smartface 项目中方便地创建和编辑 UI ...

    4 年前
  • npm 包 babel-plugin-import-sideeffect 使用教程

    在前端开发中,我们经常会用到 JavaScript 的一些库和框架,并以 npm 包形式安装使用。而有些库可能在导入时会带来一些副作用,比如改变全局状态、影响性能等。

    4 年前
  • npm包@neorel/fetch-intercept使用教程

    在现代的web开发中,我们经常会用到一种工具,即Fetch API,它是一种建立网络请求的JavaScript接口,使用起来比传统的XMLHttpRequest更加方便和简单。

    4 年前
  • npm 包 @leohxj/eslint-config-dawn-base 使用教程

    1. 什么是 @leohxj/eslint-config-dawn-base? @leohxj/eslint-config-dawn-base 是一个基于 eslint 的配置包,旨在为前端开发者提供...

    4 年前
  • npm 包 ar-detect 使用教程

    前言 在前端开发中,我们经常需要判断用户的浏览器信息和操作系统信息,以便调整页面显示和功能支持,而 ar-detect 就是一款方便快捷的 npm 包,可以帮助我们完成这种功能的实现。

    4 年前
  • npm 包 jsonre 使用教程

    什么是 jsonre jsonre 是一个 npm 包,专门用于将 JSON 数据格式化输出,方便用户阅读和查看。jsonre 可以将 JSON 中多余的空格、换行符等无用信息去除,排版清晰,语法高亮...

    4 年前

相关推荐

    暂无文章