Getting Started

In this documentation, you will learn the process required to Make a Multilingual Site in Dorik with the help of a Custom Code element & Third-party app like [Weglot.com](http://Weglot.com). Follow all the instructions below accordingly to know the details.

Make a multilingual site using Custom Code

To make your site multilingual in Dorik, follow all the steps below:

- Go to the site that you want to make multilingual.
- Create the same page with a different language and slug.
- Add a Custom Code element where you want to show your Multilingual Button
- Click on **Edit Element**
- To switch one language to another, enter the below-mentioned “Custom Code” under the HTML field.

The Screenshots & GIF below show the whole process being demonstrated visually ⬇️

In your website builder, create the same page with a different language and slug. As shown below.

💡 To learn how to create a New page, refer to the article below —

Adding Multiple Pages to your website



Add a Custom Code element, click on `Edit Element` & enter the below-mentioned Custom Code under the HTML field.

<select class="form-select form-control" aria-label="Default select example" onchange="location = this.value;">
<option value="https://multilingualsite.dcms.site/en-restaurant" selected>🇺🇸 En</option>
<option value="https://multilingualsite.dcms.site/fr-restaurant">🇫🇷 Fr</option>
<option value="https://multilingualsite.dcms.site/es-restaurant">🇪🇸 Es</option>
</select>
<style>
.form-control {
border-radius: 6px;
padding: 10px 0px 10px 0px;
background-color: #fdf6ed;
}
</style>

💡 Do not copy the above-mentioned code as it is and paste it to your site. Make sure you are giving all your Page’s full URLs that you have created.

To see the process at a glance, refer to the GIF below —

Make a multilingual site using Weglot

To make your site multilingual in Dorik, follow all the steps below:

- Log into your Weglot Account
- Create your project and click Next
- To set up your project, fill in the required fields as shown below
- Click Next
- Copy the code
- Go back to your site that you want to make multilingual
- Click on Site Settings from the top left corner of your website builder
- Go to Advanced, expand the HEADER CODE
- Paste the code provided by Weglot
- Press Save, Publish & Visit your site

The Screenshots & GIF below show the whole process being demonstrated visually ⬇️

Log into your Weglot Account



Create your project and click Next



To set up your project fill in the required fields as shown below & click Next



You can skip this step if you don’t want to do it or want to do it later



Copy the code



Go back to your site & click on Site Settings from the top left corner of your website builder.



Go to Advanced, expand the HEADER CODE & paste the code provided by Weglot



Press Save, Publish & Visit your site



And your site has become Multilingual.

Translate the CMS Rich Text Element through Weglot

This only works with the CMS Rich Text element. It will not work with the Text element

Click on Edit CMS Row Style then do the following:

- Add Rich Text Element
- Content as text type
- again click Edit CMS Row Style
- go to Advanced
- Add HTML Selector ID
- Publish changes



Now got Projects in you Weglot account dashboard complete these steps:

- Click on your project
- App Settings
- Add Dynamic
- Type in the HTML Selector ID(include the # tag), and click Save
- Go to you website and click Publish



Check if the configuration is working correctly.

Related articles

Add a new Collection

Showcase Collection items on my website

Updated on: 25/09/2023