ruttl support documentation

ruttl basics:

Edit mode

Grouped changes inside Edit mode, so all your changes made at one go will reflect inside one box; separated element-wise.

Email notifications

Your teammate/collaborator gets an email notification when you mention them in the comments.

Adding a project:

Once you’ve signed in to ruttl and are on the dashboard, please click the ‘Add Project’ button. Give your project a name, select the type of project, and voila, you can begin work on your project!

Renaming a project:

You can rename your project inside ruttl. When you hover over your project’s current name, you’ll be able to see your cursor change to a text cursor in a box. You can now modify the project name and simply hit the ‘Enter/Return’ key, or click outside the project card.

Sharing your project:

You can add more team members or any external stakeholders in your project. To do so, please view any project that you intend to share. On the top right-hand corner of the screen, click on the ‘Share’ button. Enter the email addresses of those you’d like to invite, select the level of access that you would like to provide (Can View, Can Comment or Can Edit) and then click on the ‘Save Changes’ button. Alternatively, if you just want to share your ruttl project as a ‘View only’ mode, simply switch the Shareability button to on and copy the shareable link. You now have the project link, which you can share with other people without inviting them to the project.

Signing out of ruttl:

To sign out of ruttl, simply click on the top right corner menu and select ‘Sign out’ from the dropdown.

Archiving a project:

You can archive your project by simply hovering your mouse on the top-right hand corner of the project card. An archive icon will appear. Click on this icon to archive your project.

Restoring an archived project:

You can restore your project from the main dashboard. Please go to the top left corner of your screen, immediately to the right of the ruttl logo. From the drop-down menu, select ‘Archived’. Hover on the project you want to restore and click on ‘Restore Project’ Your project is now restored and back on the main dashboard.

Deleting your project:

You can also permanently delete any of your projects. Please go to the top left corner of your screen to the ruttl logo’s immediate right on the main dashboard. Select the dropdown and go to ‘Archived Projects’. On this page, hover on the top right-hand corner of the project you want to delete & click the delete icon. After you confirm by clicking the ‘Yes’ button, your project will be permanently deleted.

Please note that projects deleted from Archived Projects cannot be retrieved so please be sure when you delete them.

Adding web pages inside a project:

After your project is created, please copy the URL of the website/staging link that you want to review, paste it inside the box, click the ‘Add Page’ button, or simply hit the ‘Enter/Return’ key. If you want to add multiple links, please add them one at a time inside your project.

Renaming web pages:

You also have the option to rename your web pages inside ruttl. Just hover onto the area where you can see the URL, your mouse cursor will turn into a text cursor, and a box will appear around the URL of your webpage. Modify your web page’s name and simply hit ‘Enter/Return’ key, or click outside the web page card.

Archiving a web page:

You can archive a web page. Inside any project, simply hover your mouse on the top-right hand corner of the web page. A delete icon will appear. Click on this icon and your web page will now be archived.

Restoring an archived web page:

To restore your archived web page, please view the project in which the web page was archived. Please go to the top left corner of your screen (project name) to the immediate right of the ruttl logo. From the drop-down menu, select ‘Archived’. Inside this page, hover on the web page you want to restore and click on ‘Restore Page’ Your web page is now restored and added back to the project.

Deleting a web page:

You can also delete any of your web pages. Inside any project, please go to the top left corner of your screen (project name) to the immediate right of the ruttl logo. Select the dropdown and go to ‘Archived’. On this page, hover on the top right-hand corner of the web page you want to delete & click the delete icon. After you confirm by clicking the ‘Yes’ button, your web page will be permanently deleted.

Please note that web pages deleted from your archive cannot be retrieved so please be sure when you choose to delete them.

Previewing a web page:

To preview a web page, access it from the project you have added to and click on ‘View Page’. ruttl will now load the web page. Do note that this may take up to a few moments, so please be patient during the process. By default, ruttl will load the preview mode itself, displayed in the ‘eye’ icon at the bottom of the browser screen.

Commenting on a web page:

Please use the ‘Comment’ icon which is immediate to the left of Preview mode, to comment on a web page. Once toggled on, hover over the area where you would like to place a comment. A pop-up box will appear, type your comment inside this box, click on the ‘Comment’ button, or simply press Enter/Return.

You can also move any of your comments. Simply hover over the blue comment placeholder, the cursor will change to a 4-way arrow. Now click on this placeholder and move the comment to the desired location on the web page itself. If you have been invited to a project, you need comment access to add any comments.

Please note: Some comments might stay inside a blue-line box and not move outside it. This is because it is inside that particular website’s element. If you need to move it outside the box, please consider adding another comment and deleting the previous one.

Assigning a comment/mentioning another team member on a web page:

To assign a comment or bring a team member’s attention to a specific area, you can mention their name in the comment. To do this, once the pop-up box opens up, press ‘@’ and select the name of your team member, or start typing their name. This team member will now get a notification in the ‘Notification bell’ in the top bar, towards the right-hand side. You can also resolve, edit, delete or reply to your comment.

All resolved comments can be viewed in the sidebar. To do so, keep the web page open, and Comment mode enabled, then go to the bottom right corner of the screen. This place will show you the number of comments inside a web page (Example - 3 comments). Clicking on this button will open a sidebar divided into ‘Active’ and ‘Resolved’.

If you get assigned to a comment, check your notifications to land on the same web page. You can access the comments sidebar from the bottom right-hand side in ‘Comment’ view. You can access all the comments of that web page and ‘Resolve’ the comment you’re assigned to, or reply to it to keep the communication flowing.

Edit and inspect live websites on ruttl:

With ruttl, you can now edit and inspect live websites. Simply go to the project and click on the web page you would like to edit/inspect. Once loaded on ruttl, you can then preview, comment and edit directly on live websites!

Enabling mobile view:

With ruttl, you get the option to view your web pages in both Desktop view and Mobile view. To enable mobile view, open the web page which you would like to view. You will see two buttons in the bottom bar’s left-hand side - one resembling a Desktop and the other resembling a Mobile. Click on the mobile button and your web page will now be loaded in mobile view.

Please note: Comments and edit activities are separate on mobile and desktop mode. Click on the Desktop icon to go back to the Desktop view. By default, all web pages will open in Desktop view.

Create versions of the same web page inside a project:

You can create multiple versions of the same web page. To do so, copy the URL of the web page you would like to create multiple versions of. Paste the URL inside the same project. Now, wait for the version to be added and then click on the ‘View Page’ button. Once loaded, you can now see versions of the same web page on the bottom left of your screen. Click on the button labelled ‘Version’, a dropdown menu will appear. You will be able to see the date and timestamp of the version. Select the version, and that specific version will then load on ruttl.

Inspect live websites on ruttl:

You can inspect live websites on ruttl. Simply click on the fire  🔥 icon to the right of Comment and Preview modes. Once enabled, you can now edit live websites, without any coding knowledge.

• Edit text -Hover over to any title, subtext or any text on the webpage. Click on it, select on ‘Edit text’, add your updated content or completely replace the existing text and then press ‘Save Changes’. You can also change font, font type, alignment, font size, line spacing, character spacing, font colour, text opacity, background colour, border radius, padding, margin, width and height of the text box from the sidebar.
• Change the position of text -You can change the positions of the text on the webpage. Simply select any text box and press your keyboard arrow keys to shift the text box to the place you want.
• Replace images -Select an image, click ‘Upload’ and then upload the image of your choice. For best results, upload the image in the same resolution as it was earlier.
• Change the position of images -Select any image and press your keyboard arrow keys. Now take the image to the desired position.
• Change the background colour -Select the background you want to modify. In the sidebar, click on Colour, select the colour of your choice, or enter an RGB colour code.
• Change the position of elements -If a web page has some specific shapes or elements, which you would like to shift, first, select them. Then, use your keyboard arrow keys to change the position of the shape or element.

Account Settings:

You can also change your account settings. You can access them from the top right hand corner menu. Account settings will give you access to the following:

• Change avatar -Choose from a list of multiple avatars.
• Display name -You can change your display name to whatever you want.

Once you have made changes to any of the above, hit the ‘Update Profile’ button and your changes will be saved.

• Email address -This is your email address, which is used to sign in to ruttl. This cannot be edited or replaced.
• Password -Change the password by typing in the new password and repeat the same to confirm the password.
• Demo video -If you face any doubts while using ruttl, feel free to view the ‘Demo video’ of ruttl. It is available in the ‘How to use ruttl’ section. Alternatively, you can send us an email on support@ruttl.com and we would be happy to assist you!.
• Notifications -From the notifications section, you can customize which email notifications would you like to receive. You can toggle between notifications for project activity, notifications for marketing, or even disable all email notifications.
• Contact us -For any queries, issues, doubts or bugs, feel free to contact us using the form on Contact us. You can select the subject for contacting us, and we shall reply to your query at the earliest possible. Alternatively, you can also reach out to us at support@ruttl.com and we will be happy to assist you.
• Delete account -If you feel that ruttl is no longer useful to you, you can delete your account at any time. Please remember - if you delete your account, none of your data will be available and any active subscription will also be cancelled. Also, there is no option to undo after deleting your account.

Contact Us:

If you have any other questions or need anything else, you can contact us through the form or send an email to support@ruttl.com.

Please note: If you’re emailing us, please mention your query/issue in the subject line so we can get to it asap!

Feedback:

As a feedback tool, we believe in consistent, constructive feedback. Feel free to send us your comments and notes as you use ruttl — we accept both bouquets and brickbats.

To send us feedback, you can click the question mark icon to the left of your menu on any screen. This will load a small popup which will let you take a screenshot of any problem you’re facing and share the issue with us. Once it reaches us, we get to work on solving it as quickly as we can!