Documentation
Feedback
Guides

Elfsight

Elfsight first party integration app. The solution provides widgets that help website owners to increase sales, engage visitors, collect leads and more.

{"base64":"  ","img":{"width":1266,"height":581,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1790558,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-elfsight-0.png"}}

Configuration

  1. Adding the app as a theme dependency in the manifest.json file;

_10
"dependencies": {
_10
"vtex.elfsight": "1.x"
_10
}

  1. Add the block elfsight, responsible for rendering your Elfsight widget, to your theme blocks.json file. Notice: the block can be added to any page template you want.
  2. Declare in it the prop appId whose value must be the app ID of the widget provided by Elfsight. For example:

_11
"footer-layout.desktop": {
_11
"children": [
_11
+ "elfsight#foobar"
_11
]
_11
},
_11
_11
+ "elfsight#foobar": {
_11
+ "props": {
_11
+ "appId": "4a13d81d-20f3-4661-b472-9de777efe3ed"
_11
+ }
_11
+ }

elfsight props

Prop nameTypeDescriptionDefault value
appIdstringThe app ID of the widget provided by Elfsight. The format should be as follows: XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX.undefined

You should get the app ID from the Elfsight admin:

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAMklEQVR4nAEnANj/ACYmJgMEAzAwMAgICADKysusqqnx7Om+vr4Avr6/HjoSJ0AZh4aH/c4PPEBpZh0AAAAASUVORK5CYII=","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-elfsight-1.png","width":646,"height":456,"type":"png"}}

Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page