Parmi les widgets disponibles dans l'application, vous trouverez:
- widget pour la page d'accueil
- badge
- formulaire d'évaluation
- widget dans le pied de page de l'e-mail
- widget de produit
Ajout de widget sur la page, formulaire d'évaluation, badge et widget dans le pied de page de l'e-mail:
- Connectez-vous à l'application Rating Captain et accédez à l'onglet Widgets.
- Sélectionnez le widget que vous souhaitez ajouter sur la page.
- Configurez l'apparence du widget et cliquez sur Enregistrer le nouveau widget.
- À droite de l'aperçu du widget, un bouton Copier le code apparaîtra. Cliquez dessus.
- Collez le code copié à l'endroit où vous souhaitez qu'il s'affiche sur la page.
Vous pouvez créer plusieurs versions du widget et modifier leurs noms pour faciliter leur identification. Vous pouvez modifier le nom du widget en double-cliquant sur l'icône du crayon.
À savoir : Pour désactiver le widget, cliquez sur le curseur (le widget disparaîtra de la page mais restera visible dans les widgets enregistrés).
Ajout de widget de produit
Pour ajouter un widget de produit, une intégration avec le système Rating Captain est requise. Si vous n'êtes pas intégré, accédez à l'onglet Site et sélectionnez l'intégration appropriée.
- Accédez à l'onglet Widgets → Widget de produit.
- Configurez l'apparence du widget et cliquez sur Enregistrer le nouveau widget.
- Copiez le code sous l'aperçu du widget.
- Collez le code à l'endroit approprié dans le script de la page et à la place : Your product id, entrez l'ID du produit du magasin.
En plus du widget de produit, vous pouvez également inclure sur la page un formulaire d'évaluation du produit.
- Pour ajouter le formulaire, créez et enregistrez le formulaire d'évaluation (Widgets → Formulaire d'évaluation).
- Ensuite, dans l'onglet du widget de produit, cliquez sur le bouton Ajouter un formulaire d'évaluation du produit situé dans l'aperçu du widget.
- Cliquez maintenant sur Mettre à jour.
Si les options de base pour ajouter des widgets ne vous suffisent pas, vous pouvez les modifier avec CSS.
- Pour ce faire, sous l'aperçu du widget sélectionné, cliquez sur le bouton Modifier le CSS.
- Dans l'Éditeur de code CSS, ajoutez vos propres styles.
- Cliquez sur le bouton Mettre à jour.
Rappelez-vous ! Si vous apportez des modifications aux widgets déjà présents sur votre site et que vous souhaitez que les modifications soient visibles immédiatement sur la page, cliquez sur le bouton Actualiser les widgets.
<script>
var RatingCaptain_data_script = {
/* REQUIRED | Email, on this address will be send message */
"email": "{$order->email}",
/* REQUIRED | Order in your system, this field should be unique */
"external_id": "{$order->id}",
/* Optional - Products in this order, each product must have id name and price. */
"products": [
{
"id": "{$product->id}",
"name": "{$product->name}",
"price": "{$product->price}",
"imageUrl": "{$product->image}",
},
]
}
</script>
<script src="https://api.ratingcaptain.com/js_v2/[Your website token]" async></script>
*Each item in bold must be properly configured depending on your system.
*Website token you can find here: Website page.
<script>
var rc_products = {/literal}[{foreach from=$items item=i name=list}
{
'id': '{$i->product_id}',
'name': '{$i->name}',
'price': '{$i->price_gross|money_without_currency}',
'imageUrl': '{$i->product->images[0]->url|product_img_url:th100}'
},
{/foreach}]{literal};
var RatingCaptain_data_script = {
"email": '{client_email}',
"external_id": '{order_id}',
"products": rc_products
}
</script>
<script src="https://ratingcaptain.com/api/js_v2/[Your website token]" async></script>
*Website token you can find here: Website page.
<script>
var rc_products = [{products}
{
"id": "{products.product_id}",
"price": "{products.float_price}",
"imageUrl": "{products.img}",
"name": "{products.name}"
},
{/products}];
var RatingCaptain_data_script = {
"email": '{email}',
"external_id": '{order_id}',
"products": rc_products
}
</script>
<script src="https://ratingcaptain.com/api/js_v2/[Your website token]" async></script>
*Website token you can find here: Website page.
<script>
var RatingCaptain_data_script = {
"email": "[[email]]",
"external_id": "[[orderid]]"
}
</script>
<script src="https://ratingcaptain.com/api/js_v2/[Your website token]" async></script>
*Website token you can find here: Website page.
{% block page_checkout_finish_rating_captain %}
{% set ratingProducts = [] %}
{% for lineItem in page.order.lineItems.elements %}
{% if lineItem.type is same as 'product' %}
{% if lineItem.cover.url %}
{% set ratingProduct = {
id: lineItem.payload.productNumber,
name: lineItem.label,
price: lineItem.price.totalPrice,
imageUrl: lineItem.cover.url,
} %}
{% else %}
{% set ratingProduct = {
id: lineItem.payload.productNumber,
name: lineItem.label,
price: lineItem.price.totalPrice,
} %}
{% endif %}
{% set ratingProducts = ratingProducts|merge([ratingProduct]) %}
{% endif %}
{% endfor %}
{% set ratingCaptainData = {
email: page.order.orderCustomer.email,
external_id: page.order.orderNumber,
products: ratingProducts
} %}
<script>
var RatingCaptain_data_script = [{{ ratingCaptainData | json_encode | raw }}];
</script>
<script src="https://ratingcaptain.com/api/js_v2/[Your website token]" async></script>
{% endblock %}
*Website token you can find here: Website page.
Was the article helpful?
mdi-check
Yes
mdi-close
No
Thank you for rate this article.
200 out of 239 found this article helpful