Sharing5 Min.

Troubleshooting - Update your embeds after May 2023 studio update

With the studio update of May 2023 the studio embed codes are revised. Read this article to learn how this impacts you.

Jurgen van den Brink (Front-end | Support)
Jurgen van den Brink
Front-end | Support

May 2023 studio update

With the May 2023 update of the Tripetto studio, the embed code got a revision. Besides some under the hood improvements to make the embeds future-proof, the embed code itself also became smaller and easier.

Comparison

Compare the different embed codes yourself, so you can determine which version you are currently using:

Embed code before May 2023 update

<div id="tripetto"></div>
<script src="https://cdn.jsdelivr.net/npm/tripetto-runner-foundation"></script>
<script src="https://cdn.jsdelivr.net/npm/tripetto-runner-autoscroll"></script>
<script src="https://cdn.jsdelivr.net/npm/tripetto-services"></script>
<script>
var tripetto = TripettoServices.init({ token: "STUDIO_FORM_TOKEN" });

TripettoAutoscroll.run({
    element: document.getElementById("tripetto"),
    definition: tripetto.definition,
    styles: tripetto.styles,
    l10n: tripetto.l10n,
    locale: tripetto.locale,
    translations: tripetto.translations,
    attachments: tripetto.attachments,
    onSubmit: tripetto.onSubmit
});
</script>

Embed code since May 2023 update

<div id="tripetto-div-id"></div>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner"></script>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/runner-autoscroll"></script>
<script src="https://cdn.jsdelivr.net/npm/@tripetto/studio"></script>
<script>
TripettoStudio.form({
    runner: TripettoAutoscroll,
    token: "STUDIO_FORM_TOKEN",
    element: "tripetto-div-id"
});
</script>

Legacy

The new embed code runs on the latest Tripetto core components. The core components that the old embed code uses, will not be updated anymore from here on. Therefore we advise to always update your embed code(s), so you keep up to date with the latest version of Tripetto and you are sure everything keeps working; now and in the future.

When to update

Although it is advised to update your embed code anyway, your current embed code keeps working. Let's have a look at the most common situations in which you have to take action:

  • Embed with studio-hosted data: updating not necessary, but advised.
  • Embed with self-hosted data: updating advised and shift to Tripetto FormBuilder SDK required.

Embed with studio-hosted data

The old embed codes of forms that store their data at Tripetto, will simply keep working. Still, it is advised to update your embed code(s) (see instructions). Only then you're guaranteed that your embed code keeps working with any change you might do in your form in the future. Plus it guarantees that you can use any new features that we introduce in the future!

Embed with self-hosted data

In case you are using self-hosting options in the old embed code (for example to store data on your own infrastructure), these will keep working. Still, it is advised to update your embed code to be sure your embed code keeps working with any modifications you do in your form and is able to use any new features in Tripetto.

In regards to self-hosting the May 2023 update possibly has some more impact for you: self-hosting is no longer possible in the default embed codes from the Tripetto studio. The self-hosting options have shifted to the 'Integrate' share method in the Tripetto studio. By using this new share method, you enter a different version of Tripetto: the Tripetto FormBuilder SDK, for which specific terms and pricing apply. For more information see this help article about integrating.

🔔 Notice: Tripetto FormBuilder SDK required

By using the 'Integrate' share method, you enter a different version of Tripetto: the Tripetto FormBuilder SDK, for which specific terms and pricing apply. More information:

If this is the case for you, we gladly hear from you to help you migrating. Please submit a support ticket and we'll contact you as soon as possible.

How to update

Updating your embed codes is quite easy in most cases, except when you use self-hosting (see below).

Steps to take

  1. Get embed code - At the top menu bar of the form builder click Share. The Share pane will show up on the right side of the form builder. Over there choose for method Embed in a website and you will see the embed code and some settings. Configure the embed code as required for your case and copy it to your clipboard.
  2. Replace embed code - In your site replace the old embed code with the newly generated embed code. Please notice the following:
    • Check HTML element - The new embed code uses unique div id's for inline implementation. Please make sure you attach the form to the corresponding div element via the element parameter in your embed code.
    • Copy custom CSS - The embed code from the studio does not include any custom CSS. In case you had implemented the customCSS parameter in your old embed code, make sure you add this to your new embed code as well, within the TripettoStudio.form() function.
    • Update custom CSS - The way you add custom CSS also has gotten a slightly revision, because the package names of the question blocks have been altered. To see the differences have a look at this help article about custom CSS.
    • Scripts via custom domain/CDN - Using a custom domain/CDN to host the Tripetto scripts? Make sure you update these scripts to the latest versions. You can download the latest versions via the Share pane in the Tripetto studio. Please note that the file names of the scripts have changed as well.
  3. Publish update - After updating, of course don't forget to publish the update to your live website.

Self-hosting

Have you implemented self-hosting options in your old embed code (used the definition parameter or customized the onSubmit parameter)? Self-hosting options are no longer part of the studio embed terms, but now are part of integrating with the FormBuilder SDK. If this is the case for you, have a look at this help article about integrating.

If you need any help with switching to the Integrate method or to determine your FormBuilder SDK license, please submit a support ticket and we'll contact you as soon as possible.

Still having issues?

Despite the above instructions, you're still experiencing issues? Don't hesitate to submit a support ticket. We're happy to help you!

In this article

    Help us improve