Tumblr

🔖

A step-by-step guide to set up a Vialog on your Tumblr website.

Prerequisites:

Have a Tumblr website
Your 8-character discussion shortcode from your relevant discussion's settings page on the Vialog Dashboard.
You will need these two HTML code snippets:

<script src="https://ui.vialog.app/vialog-loader.js"></script>

Vialog Loader script

<a name="vialog-YOUR_DISCUSSION_SHORTCODE"></a><div data-vialog="YOUR_DISCUSSION_SHORTCODE"></div>

Vialog embed snippet

Note: you will need to change YOUR_DISCUSSION_SHORTCODE to your 8-character discussion short-code

Example of a Vialog integration on Tumblr.

Steps

1. Log into your Tumblr account.

2. On your dashboard, add a new Text post or edit an existing post (wherever you want to add your Vialog widget.)

3. Click the Gear ⚙️ icon on the top right of the post and select HTML for Text editor before pasting your Vialog embed snippet.

4. Paste the Vialog embed snippet code and change YOUR_DISCUSSION_SHORTCODE to your 8-character discussion shortcode.

<a name="vialog-YOUR_DISCUSSION_SHORTCODE"></a><div data-vialog="YOUR_DISCUSSION_SHORTCODE"></div>

Vialog embed snippet

Enable Vialog on Tumblr

The following steps only need to be set up once. You also need to repeat the steps below if you change your Tumblr's Theme.

A) To enable Vialog to load on your Tumblr website, go to Account > Edit Appearance

B) At the Website Theme section, click the "Edit theme" button

C) At the top left, click on "Edit HTML"

D) Search for </body> inside the code (it should be one of the very last lines of code displayed here) and insert the Vialog Loader script before the </body> tag

<script async src="https://ui.vialog.app/vialog-loader.js"></script>

Vialog Loader script

E). First "Update Preview" then "Save"

That's it, you're all set! Your Vialog widget is now live on your Tumblr site!

FAQ

‣

Q: When I try to save my custom theme, the following message appears! What should I do?

Uh oh! We couldn't save your theme. Looks like your custom theme references assets from non-HTTPS URLs. Please try again using only HTTPS URLs.

A: Tumblr doesn't allow you to save your template if there are any page assets, such as images or scripts, being served from insecure (HTTP) servers. Luckily, fixing this error is relatively easy! You need to ensure all absolute URLs begin with https. Using the built-in Search & Replace functionality of tumblr's HTML editor, simply change all occurrences of http:// to https://

Make sure to search for "httpss://". You need to change these back to https://

Once all the links have been changed, click Update Preview again, and you will then be able to Save the template changes.

‣

Q: When I visit my Tumblr from a mobile device, the Vialog discussion is not available.

Go to "Edit Appearance" and then Edit Theme, and scroll down all he way down to "Advanced Options."

Make sure that "Use default mobile theme" is turned off.

‣

Q: How can I change the language of the Vialog?

Use the data-lang parameter. The list of available languages is listed here:

Localise tool language

This project has received funding from the European Union’s Horizon 2020 research and innovation programme through ARTICONF (825134) and STADIEM (951981) projects.

Fully GDPR compliant | Supported by Innovate UK | Comes with a Climate Positive Discussion promise

Follow us Twitter | Linkedin