How to integrate Pickfoot into your Website
Congratulations, you have created your first storelocator and now you want to integrate it on your website, with Pickfoot it’s a breeze.
1/ SDK Script : One Code line to rule them all
1. Get the script of your widget
The script of your widget is the piece of code that you will have to insert on your site to display your widget.
To get it, nothing could be easier:
- Open your project
Click on the « Integration » menu - Magic, the script appears! There’s even a little « Copy » button to make your life easier 😉
2. Integrate and publish the script
Now that you have the script in hand, all that’s left to do is integrate it on your site 💻
- Installation in the code of your site You need to integrate our script into the code of your site:
- Either in the <head> tag
- Or before the closing of the </body> tag
<script>
(function (d, s) {
var t = d.getElementsByTagName(s)[0], e = d.createElement(s);
e.async = true;
e.src = "//static.pickfoot.com/sdk.js";
t.parentNode.insertBefore(e, t);
})(document, "script");
</script>
1/ Display it
Place this second line of code where you want to display the map
If for example you want to display it in the middle of the page like here use this code
Or if you prefer to have it in dialog on the whole site insert the following code after the previous script in a theme section present on all the pages of your site like for example the header or the footer
You can use the following attributes on the <pick-foot> component:
- projetId (required): the unique identifier of your project that you will find in the project integration section
- displayMode(inline or dialog): the display mode of the widget, it can be displayed in full page or as a dialog box that opens from a fixed button.
- dialogPosition (LEFT or RIGHT): only when displayMode=dialog, define where the dialog button will be displayed at the bottom of the page
- language(default en): language to display, it can be (en or fr)
- height(css value of the height in px, vh or %) : the height of the map on your page, only for when displayMode= inline
<pick-foot
projectId="b3b5751a-c3ce-495f-8a85-284af04b40fb"
openByDefault="true"
displayMode="inline"
language="en"/>
