Codeblocks
Contents
Introduction
Demo
Documentation
Code
false
Overview
Link Preview Popups

⚠️ Work in progress ⚠️

Attention: This script showcased on this page is not finished! It might not work as intended under certain conditions, on certain browsers or on certain devices. The JavaScript filed linked in the code section below is still subject to change and could break pages which used the older file. If you would like to report errors or make suggestions for new features you can do this here.

false

Link Preview Popups

Make your links more engaging by showing a quick preview popup when hovering over them. With the help of Linkz.ai you can add this functionality to you website with just a single line of code. This powerful tool will not only do all the hard work for you but also has a lot of features to allow the user to preview content without even leaving the page. Register now and start using this tool for free on your website.

Demo

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

even works for buttons

You haven't noticed anything? Well, thats what success looks like. Inspect the code of the images above to see the effect of the script in action.

Code

Attention: This code is linked to external files which might change or become unavailable in the future!

To make the code below easier and faster to implement it relies on files which are hosted externally on our servers. Because of that we cannot give you a 100% guarantee, that these files will always stay the same, or will always be accessible through the link provided. For better reliability we therefor advice you to host these files by yourself or add its content directly in Webflow. You can learn more about this topic here.
https://eseassets.ch/globalscripts/code/code.js
Download File

Add this code inside the <head> tag on your page.

Copy code
The code in here is only visible on the published website.
Go to codeblocks.webflow.io or take the code from the actual custom code field of this page

Add this code before the </body> tag on your page.

Copy code
The code in here is only visible on the published website.
Go to codeblocks.webflow.io or take the code from the actual custom code field of this page
We won't take any responsibility for the code provided. It may not be set up according to best practices of programming or built in the most efficient way possible. It's just here so solve your problem.

Get the source code for
free by signing up to Codeblocks