Upsell + Publish Flows

Publish and Upsell Flow

While integrating with Duda you may want to upsell more features to your customers, such as publishing the website. Duda supports two scenarios for when you want to offer an upsell option to users:

• Customer is trying to publish a website for the first time.
• Customer is trying to use a feature that is locked.

Customize Publish Flow

During these scenarios, it is important to make sure that the customer has a smooth and uninterrupted experience while upgrading. Duda offers two methods for doing this:

• Open Lightbox/Iframe
• Redirect users to an external URL

For both options, Duda will append URL parameters that give you additional context about who the user is and what information to pass along.

To configure Publish and locked features, Under White Label, select API Access and click Customize publish flow, then choose the option most appropriate for your workflow.

Open iframe in a Lightbox (Recommended)

This option will allow you to open a dedicated upgrade page over the website builder that looks like the following:

Interact with Parent iframe

The page within the iframe can communicate with the Duda editor (parent frame) through simple JavaScript APIs.

To use Duda's JavaScript API, you will need to embed the following script into your upgrade page:

<script async src="https://my.duda.co/_dm/s/common/scripts/publishOverlayAPI.js"></script>

Once you've embedded this, you'll be able to call the following JavaScript properties:

Publish Done or Finished

If using the Redirect without publishing or iframe without publishing options, a site will need to be published via the API.

Additionally, you can call this function to tell Duda to refresh the editor. This will update the user with the current status of the website.

publishOverlayAPI.publishDone()

Website Upgrade Complete

If you upgrade the site plan or permissions via the API while the user is interacting with the upgrade page, you need to call the upgradeDone() function call to grant the user access to the newest features you've enabled.

publishOverlayAPI.upgradeDone()

Close Overlay

To close the overlay, you can call the publishOverlayAPI.closeOverlay() function to close the iframe and let the user continue to edit/build their website.

publishOverlayAPI.closeOverlay()

Redirect Upon Publish

Instead of using an iframe, you can redirect users to an external URL that you host.

There are two options for redirecting to an outside URL:

• Publish and redirect: When this option is selected, the website publish process will continue and the user will be redirected to your external upgrade flow.
• Redirect without publishing (most common): Redirect the user to complete the upgrade/registration and do not publish the website. This will require you to offer the option to publish the website (via the API) for your customers.

📘

Configure with App Store

In order to configure this for the app store and allow your clients to purchase apps, please reach out to your Account Manager. After this is enabled by your Account Manager, please keep in mind the following:

• In order for clients to see an upsell option in the app store, they will need to have the CLIENT_MANAGE_PAID_APPS permission configured on their account.
• If displaying an iframe, the dimensions of the iframe will be 500px x 740px.
• If displaying an iframe, after the app has been successfully installed, please use publishOverlayAPI.upgradeDone()to refresh the editor and allow your end users to access the installed app.