Good morning, so my client asked me to install the use insider tool in the store checkout, but they asked me to add a new attribute inside the insider_object. However, if I try to put the method inside the checkout code, it runs before the method is created.
const customFields = {
whatsapp_option: true,
custom: {
some_property: "value"
}
}
window.insertCustomAttrInsider("user", customFields)
I don’t know where to insert this — according to the documentation, it’s either through the pixel events app inside the handleMessages() function or through a React component. But honestly, I have no idea where that is.
The documentation itself: https://developers.vtex.com/docs/apps/codeby.useinsider@1.x#advanced-options
Hey @Cristiano.reis, how’s it going?
The window.insertCustomAttrInsider method should be called after the insider_object has been initialized. According to the documentation, you can use the handleMessages function to achieve this.
Here’s an example of how you can do it:
1// Inside the handleMessages function
2 function handleMessages() {
3 // ...
4 window.insider('handleMessages', {
5 // ...
6 onReady: function() {
7 const customFields = {
8 whatsapp_option: true,
9 custom: {
10 some_property: "value"
11 }
12 };
13 window.insertCustomAttrInsider("user", customFields);
14 }
15 });
16}
By calling window.insertCustomAttrInsider inside the onReady callback, you ensure that the insider_object is initialized before adding the custom attribute.
If you’re using a React component, you can also use the useEffect hook to achieve this:
1 import { useEffect } from 'react';
2 // ...
3 function MyComponent() {
4 useEffect(() => {
5 const customFields = {
6 whatsapp_option: true,
7 custom: {
8 some_property: "value"
9 }
10 };
11 window.insertCustomAttrInsider("user", customFields);
12 }, []);
13
14 // ...
15}
In this case, the useEffect hook will run the code inside it after the component has been mounted, which should be after the insider_object has been initialized.
Just a reminder that this is only an example and you’ll need to adapt it to what you’re doing in your own code.
Hope it helps!
Cheers,
Four2One Team
Hey, would the handleMessages function be inside the pixel app in the react/index.tsx folder or in the checkout code?
Anyway, even when creating the function either in the checkout or in the pixel, it says the window.insider function doesn’t exist — it only doesn’t throw an error when I call it from the browser console.
I think I installed useinsider incorrectly somehow, I can’t really tell.
Hi @Cristiano.reis, the handleMessages function is not a standard React or checkout code function. It appears to be a function specific to the Pixel events app.
However, I took a deeper look into this issue of adding a custom attribute.
You need to define the insider_object before initializing the Insider Tag. You also need to add the sub-objects (such as user, page, product, etc.) to the insider_object.
To add a custom attribute to the insider_object, you can do the following:
1window.insider_object = {
2 user: {
3 whatsapp_option: true,
4 custom: {
5 some_property: "value"
6 }
7 }
8};
This is the correct way to add the custom attribute to the insider_object. Keep in mind that you need to define the insider_object before initializing the Insider Tag.
There’s no need to add this function inside the Pixel app or in the checkout code. Instead, you can add it in a separate JavaScript file that is loaded before the Insider Tag.
Also, you don’t need the handleMessages function to add custom attributes to the insider_object. Just define the insider_object with the desired sub-objects and attributes.
If you need any help working with objects, feel free to check this out: Web SDK Integration Guide
Main documentation: https://developers.vtex.com/docs/apps/codeby.useinsider
Just a reminder that you’ll always need to adapt things on your end.
Let us know if it works for you.
From what I’ve seen, the most correct way is one I don’t have access to through the insider object integration wizard as shown in the video https://academy.useinsider.com/docs/insider-object-integration.
I’ll check with the client, but for now I’ve been authorized to push the code without the whatsapp_opt field in the user object.
Either way, thanks for the responses.