HubSpot UI Extension | Preview quote

[MAsghari]

Is it possible to use HubSpot Quote template preview in an Iframe within a HubSpot UI Extension card? I want to avoid redirecting the user to the HubSpot quote wizard and instead display the same quote preview directly in the UI extension. Has anyone implemented this or have suggestions on how to achieve it?

So in short having this "quote preview" in a custom ui extension card:

[zach_threadint · Accepted solution]

Hi @MAsghari 👋

Yes, this would be possible to deliver using a UI Extension. In broad strokes, the process might look something like:

1. On UI Extension load (i.e. a HubSpot User loads an individual Deal view), get Quotes associated with the given Deal (importantly, retrieve the "Link to hosted Quote" property value per Quote [
   hs_quote_link])
2. Display a dropdown select button in the UI Extension, where the options prompt the user to "Preview Quote X", "Preview Quote Y" etc. The "Link to hosted Quote" is used as the target iFrame URL per option.
3. When a HubSpot User clicks on one of these options, open an iFrame to the given Quote URL.

Here's a quick recording of my proof of concept:

I hope that proves helpful. Please let me know if you have any follow-up questions.

[MAsghari]

Hi Zach,

Thanks for your answer! 

I kind of forgot to mention one important thing in my first question! Your solution is awesome and this is exactly what I want for "non-published" quotes. 

When a quote is "published" it does have "hs_quote_link" which can be presented in a iframe like you showed!

But what about a "draft" quote? I already checked and noticed the "hs_quote_link" has no value for "non-published" quotes. either the "hs_pdf_donwload_link" property is also "null". 

For non published quotes I only see "hs_public_url_key" which I have no idea what it is.

So my questions are:

1- Is there any way to preview for example a "draft" quote the same way you did?

2- What does "hs_publick_url_key" property exactly mean?

Thanks in advance!

[kennedyp]

Hey y'all! I spoke with our product team and hs_public_url_key is the value of the slug for the web quote. It's a randomly generated string that works to give the slug to live and web-accessible quotes.

They noted that if you want to get the potential URL for a drafted quote, they suggest you use hs_slug

For example, for a published quote, the parameters would be like:
name:"hs_slug",
value:"DFL5SJMiMlwXn67LbB",

name:"hs_quote_link",
value:"https://yourdomain.com/DFL5SJMiMlwXn67LbB",

For a draft quote, the hs_quote_link wouldn't be added yet, but the hs_slug would be. 

[MAsghari]

Hi @kennedyp 

Thanks for the update, but honestly I am a bit dissappointed. Each time I see an answer I feel like "Ah, Here is the Answer". But then when I put it in practice, I see that it is not correct. So I believe it is more professional to test and verify the answers before making them public!

For a "non-published" quote like a "draft" quote, we do get the "hs_slug" and "hs_domain" but it is not working. In another words,  the following link won't work for a "draft" quote and it only gives you an "Error 404 | page":

https://{hs_domain}/{hs_slug} 

So in nutshell:

- We can fetch "hs_slug" for both "draft" and "published" quotes but it only works for the later. 

My question is still there! How can we preview a "draft" quote in HubSpot??

[zach_threadint]

Hi @MAsghari 👋

Thanks for clarifying. In response to your questions:

1. Not officially, no. In theory, you could use the same undocumented API that HubSpot uses to generate their unpublished Quote previews, but obviously this runs the risk of falling over at any point. I've created a quick proof of concept relating to this -- happy to discuss this in a separate channel if you'd like.
2. I had similar thoughts when reviewing your initial question. Short answer is I don't know. It's a standard, hidden Quote property with a description of "Key for accessing quote document URL". Unfortunately, I can't find anything definitive in HubSpot docs or other related Community Forum posts. It'd be great to get some insight directly from HubSpot on this one @kennedyp @Jaycee_Lewis 

I hope that proves helpful. Please let me know if you have any follow-up questions.

[MAsghari]

Hi @zach_threadint 

Thanks for your clear answer.

Yes, I do want to know more about that undocumented API and see your proof of concept. Please let me know which channel we can continue this topic!

For "hs_publick_url_key" it would be great if you find some insights and add it to the community.

[zach_threadint]

Hi @MAsghari 👋

Feel free to reach out via HubSpot Community DMs.

[kennedyp]

Thanks for your post @MAsghari! 

I'd love to provide you with some resources to start: 

• UI Extensions overview (BETA)
• UI Extensions quickstart guide (BETA)
• UI extension components (BETA)
• Component design guidelines (BETA)
• Manage UI extension layout (BETA)

Please note that since UI Extensions are currently in BETA, the information outlined in the developer documents is subject to change and it may not have a fully-rounded functionality.

Let's see if our experts can help us out here. Hey @zach_threadint, @Anton, @Teun, @aanchalshethHS! Do any of you know if it is possible to customize these UI extension cards to include a quote preview? If not, are there any possible alternatives for @MAsghari? Thanks in advance! 

Best, 
Kennedy