BUG: previewHtml callback is not triggered

[luciengeorge]

Hello,

I am trying to preview the html using the editor's built in preview feature. I registered a callback for preview html this way I can use Mustache as a templating library.

const onReady: EmailEditorProps['onReady'] = unlayer => {
  unlayer.registerCallback('previewHtml', function (params: any, done: any) {
    const html = Mustache.render(params.html, data)

    done({html})
  })
}

It seems however that the callback is never called. It used to work a couple of days ago and now it doesn't (see screenshot below). In the the screenshot you can see that [[firstName]] is not being replaced by the appropriate data. I have updated the Mustache config to look for double square brackets rather than single curly brackets so this should work.

Thank you!

[omerzahidbajwa]

Hi,

Please let me know if you are passing in a "projectId" during initialization. Unlayer has just rolled out new billing plans and "Custom Preview" happens to be a paid feature now, if you are an old user and have an old workspace available you can still utilize the old "Free (Legacy)" plan feature sets.

Make sure to create a new project in one of your old workspaces at console.unlayer.com, pass in the projectId within your editor, make sure to add your live domain to "Allowed Domains" list which you can find under project->settings->deployment.

Let me know if this works

[luciengeorge]

This fixed it for me thank you 🙏

[kaitlynhung]

Hi @omerzahidbajwa,

Is there any way to know if the previewing (no custom HTML needed) have completed since the callback won't be triggered?

I have a custom button for users to trigger the previewing, and I want to hide the loading icons after the editor completes the task.

Thank you!

[omerzahidbajwa]

Hi, i am not sure if i understand your use case entirely but you can only access the previewHtml callback if its included within your plan, for now if you were using it previously to record if your users have triggered it you can still make use of it on a legacy projectId, make sure to add your live domain to the "Allowed Domains" list.

I am not sure if theres any other way around that without the callback, you can always put your own custom event handlers and try to track the button clicks using vanilla javascript but it can be complicated.

Didn't quiet get the loading icons part, a video might help.

[kaitlynhung]

@omerzahidbajwa sorry for the confusion.

Since I use showPreview() in addEventListener('editor:ready') callback , I expected the editor will show preview mode without loading time. But as you can see in the video, there will be an loading icon at first, the editing mode shows up, and it then switch to preview mode at the end.

RIght now I am using a backdrop to cover the whole "loading process" happens in the video, and use previewHTML callback to hide the backdrop. Is there other way around to know when the editor finishes the loading process?

Much appreciated!

Screen.Recording.2024-10-03.at.4.03.07.PM.mov

[luciengeorge]

Hi @omerzahidbajwa 👋

The issue came back even though I did set the projectId when initializing the editor. Any help would be appreciated

[omerzahidbajwa]

can you ensure "Allowed Domains" is correctly set up

[luciengeorge]

It is both for the prod and development app

[omerzahidbajwa]

The allowed domain settings seem to be correct, please ensure the projectId your passing is of a project on "Free (Legacy)" plan, any new projects would be on the new "Free" plan

[luciengeorge]

It is also set correctly. I did those changes last week and eveything went back to normal. When I spun up my app yesterday, without me changing anything, the issue came back 🤔

[luciengeorge]

Where do I check whether my project is on the Free (Legacy) plan or the new Free plan? I can't see this information displayed anywhere 🤔

Thank you!

[omerzahidbajwa]

if you go into billing and see Free (Legacy) it means you are on the old free (legacy) plan

[luciengeorge]

I don't see that so I guess I am on the new Free plan, but this project's been there for quite some time now. Why would it be on the new Free plan?

[luciengeorge]

Hi @omerzahidbajwa , reiterating on my comment above, how come is my project on the new free plan and not on the legacy free plan? The project's been there long before the update came out.

Also, in which plan is the previewHtml callback supported? Is it only the Optimize plan??

Thanks

[omerzahidbajwa]

Hi, a few users have highlighted the issue, which is being actively worked on. It should be fixed very soon.

The previewHtml call back comes under 'Custom Preview' entitlement (https://unlayer.com/pricing) as per the pricing page it should start from the 'Optimise' plan.