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: 02/11/2023