Sending a slate event from Workshop

[CodeStrap]

How can I send an event to my Slate application from Workshop? I have already defined the getMessage handler in my slate application. I was able to manually trigger the event using chrome dev tools console by pasting:

document.querySelectorAll("iframe")[0].contentWindow.postMessage({
  "target": "slate-parent-iframe-event",
  "message": {
    "alalyticsTrackingEvent": "{}"
  }
}, "*");

So, I know the function is exposed. But I can’t find a way to call it from Workshop, ideally when a user clicks a button.

[comew]

You can pass variables from Workshop to Slate by using the Slate.getMessage event indeed.

If you need to ensure that the event only runs on a button click for instance, then one way I found is to pass a boolean variable (that is a string with value “true” or “false” since one cannot actually pass booleans to Slate, but you could also pass 0 or 1). And on button click, I set the variable from “false” to “true” and reset it in the same click. If the variable is “false”, then you can return {{slDisableAction}} in your event which disables the event.

const payload = {{slEventValue}};
const shouldExecuteEvent = payload["my-boolean-string"];

if (shouldExecuteEvent !== "true") {
  return {{slDisableAction}};
}

[CodeStrap]

Thanks for the reply. I was looking for a way to invoke postMessage handlers, but it sounds like you are saying there is no way to do this. The best option is to recalculate a variable. Is that correct?

[comew]

Basically, whenever one of the input variables of the iframe widget changes, Workshop will post a message which contains all variables in the payload. That’s what you can then access in {{slEventValue}}.

So you don’t need to invoke postMessage, it’s all done by Workshop under the hood. You just need to listen to these events with Slate.getMessage and handle the variable changes (Also, you can define multiple Slate.getMessage events if you need to trigger different actions for the different variables).

[CodeStrap]

OK, thanks. I actually would prefer separate handling of variables and events. Workshop variables are hard to manage over time (the grow to a pretty rediculous size) and are clunky and hard to recompute with explicit vaues (I have to create a static variable to copy the values from which leads to even more variable bloat). In my case I’m trying to trigger tracking events that are recorded in the Ontology. The team really should add an event type in workshop that would allow me to send the event without the use of variable bindings.

[CodeStrap]

Working now. TY. Slate is pretty good at acting as an analytics collector. I can get the user agent, for example:

let params = {
            ...event, ...{
            page: {{page}},
            application: {{application}},
            userId: {{user.id}},
            userAgent: navigator.userAgent,
        }}

If I was able to access the parent property, I could automatically assign event handlers to my workshop app with something like:

Array.from(parent.document.querySelectorAll("[role='button']"))?.map(element => {
	element.addEventListener('click', (event) => {
		SlateFunctions.triggerEvent("alalyticsTrackingEvent", JSON.stringify({
        page:  page || 'slate-widget',
        eventName: 'ready',
        eventType: 'pageLoad',
        application: application || 'slate-widget',
        userId: userId || '',
        isAuthenticated: true,
        userAgent: userAgent || 'slate-widget',
    }));
	});
});

It looks like the domain is undefined for a code sandbox due to the use of the document property, but this works pretty well. Sample collection events are below. I’m going to use this to help measure customer engagement and ROI.

[comew]

Thanks for sharing, it’s a clever way to collect front-end metrics.

You may also be interested in this comment about the product team’s plans regarding this topic.